为 什么 要 写 这 本 书 


目前 ， 不 管 是 在 京东 、 淘 宝 、 当 当 还 是 亚 马 沙 ， 所 有 市 面 上 销售 的 符合 Swift 3.0 语 法 的 iOS 开 发 书籍 届 指 可 数 。 即 便 有 也 是 基于 Swift 3.0 语 言 的 几 个 常用 知识 点 ， 分 章节 进行 传统 式 讲授 ， 比 如 Swift 基 
本 语法 、 控 制 流 、 函 数 和 闭 包 等 。 如 果 再 找 一 本 Swift 2.0 的 相关 书籍 ， 从 目录 可 以 发 现 它们 之 间 的 区 别 并 不 大 。 这 也 就 意味 着 ， 如 果 你 已 经 掌握 了 Swift 2.0， 就 没有 必要 再 去 买 一 本 Swift 3.0 的 语法 书 去 学 
习 它 们 之 间 的 不 同 ， 因 为 这 些 大 部 分 只 是 形式 层面 上 的 不 同 。 


作为 一 名 iOS 开 发 程序 员 ， 如 果 掌 握 了 Swift 语法 知识 以 后 ， 接 下 来 便 是 需要 通过 积累 项 目 实战 经 验 来 提升 自己 的 等 级 了 。 而 这 一 过 程 的 重点 是 在 完成 项 目 需求 的 “一 条 线 、 一 个 面 ”上 ， 而 不 是 在 “ 某 
个 点 ” 上面。 因此， 这 个 项 目 必 须 是 一 个 接近 完美 的 产品 ， 它 要 可 以 访问 后 台数 据 库 ， 具 有 社交 功能 ， 可 以 添加 关注 和 “被 粉 ”， 可 以 注册 用 户 ， 实 现 登 录 和 退出 ， 通 过 注册 的 邮箱 修改 密码 ， 发 送信 息 到 
后 台 服 务 器 的 数据 库 ， 可 以 通过 相册 发 布 帖子 照片 ， 可 以 评论 、@ 其 他 用 户 和 提交 主题 标签 ， 当 有 新 消息 的 时 候 还 可 以 通知 当前 用 户 。 基 于 这 样 的 考虑 ， 本 书 以 国外 较为 流行 的 照片 分 享 应 用 程序 一 一 
Instagram 为 例 ， 实 现 了 从 用 户 注册 、 登 录 到 照片 发 布 、 评 论 、 主 题 标 签 和 @mention 等 一 系列 功能 ， 让 广大 读者 可 以 通过 本 书 将 所 学 到 的 知识 点 运用 到 实战 中 去 ， 摆 脱 纸上谈兵 ， 真 正 地 将 所 有 的 知识 点 
融会 贯通 ， 从 而 打通 所 有 “脉络 ”， 在 编写 程序 代码 的 时 候 达到 “ 思 如 泉涌 ”的 效果 。 


本 书 的 主要 内 容 和 特色 


在 笔者 读 过 的 很 多 技术 书籍 中 ， 绝 大 部 分 都 是 每 个 章节 介绍 一 个 技能 ， 并 且 通 过 一 个 相对 独立 的 实例 来 进行 讲解 。 例 子 虽 然 短小 ， 容 易 理 解 ， 但 是 所 有 章节 没有 任何 关联 ， 使 读者 缺乏 开发 一 个 真正 完 
整 项 目的 体验 。 


本 书 以 构建 一 个 仿 Instagram 项 目的 实践 案例 贯穿 全 书 ， 将 所 有 知识 点 融入 到 实践 中 ， 使 大 家 真正 理解 和 掌握 如 何 通 过 Xcode SDK 和 Swift 3.0 语 言 来 开发 iOS 应 用 程序 。 


除了 书 中 所 涉及 的 程序 代码 以 外 ， 本 书 还 配套 推出 了 相应 的 Ul 设计 视频 ， 并 通过 二 维 码 的 形式 供 广 大 读者 观看 。 这 样 做 的 目的 : 一 是 因为 通过 视频 方式 讲解 UI 界面 的 制作 过 程 会 更 加 生动 形象 ， 易 于 读 
者 的 学 习 与 实践 ; 二 是 可 以 节省 很 多 纸张 来 进行 文字 性 描述 和 贴图 ， 更 加 环保 ; 最 后 一 点 就 是 阅读 本 书 的 读者 大 部 分 都 是 程序 员 ， 本 身 对 于 美工 方面 的 技能 并 不 是 很 精通 ， 但 多 了 解 一 些 也 没有 什么 坏处 ， 
不 至 于 在 团队 交流 的 时 候 被 “忽悠 ”了 。 基 于 这 三 点 考虑 ， 笔 者 录制 了 相应 Ul 界 面 的 制作 视频 ， 可 以 让 程序 员 在 编写 代码 的 时 候 ， 开 开心 心 制作 Ul 界 面 。 


本 书 是 根据 应 用 程序 项 目 所 实现 的 功能 安排 章节 的 ， 具 体 如 下 : 

第 一 部 分 (第 1~10 章 ) 实现 的 是 Instagram 最 基本 的 功能 ， 包 括 : 在 iOS 项 目 中 集成 LeanCloud SDK， 实 现 用 户 的 注册 、 登 录 和 密码 重 置 功能 ，Ul 界 面 的 搭建 与 布局 。 
第 二 部 分 (第 11~18 章 ) 实现 个 人 用 户 和 访客 页 面 的 相关 功能 ， 包 括 : 个 人 用 户 和 访客 的 页 面 UI 搭建 ， 从 LeanCloud 云 端 获 取 个 人 信息 ， 关 注 和 被 粉 信息 等 。 

第 三 部 分 (第 19~25 章 ) 实现 的 是 个 人 配置 页 面 及 发 布 页 面 的 功能 ,包括 : 个 人 配置 页 面 的 数据 接收 与 提交 ， 帖 子 照 片 的 上 传 ， 分 页 载 入 ， 帖 子 单元 格 的 布局 等 。 

第 四 部 分 (第 26~32 章 ) 实现 了 帖子 评论 功能 ,包括 : 创建 评论 界面 ， 创 建 主题 标签 和 @mention 功 能 等 。 

第 五 部 分 (第 33~37 章 ) 实现 了 Instagram 的 集合 页 面 ， 搜 索 及 通知 功能 。 


各 个 部 分 的 功能 实现 都 基于 由 浅 入 深 、 循序 渐进 的 原则 ， 让 广大 读者 在 实践 操作 的 过 程 中 不 知 不 党 地 学 习 新 方法 ， 掌 握 新 技能 。 


本 书面 向 的 读者 
本 书 适合 具备 以 下 几 方 面 知 识 和 硬件 条 件 的 群体 阅读 。 
. 有 面向 对 象 的 开发 经 验 ， 熟 悉 类 、 实 例 、 方 法 、 封 装 、 继 承 、 重 写 等 概念 。 
- 有 Objective-C 或 Swift 的 开发 经 验 。 
" 有 MVC 设 计 模 式 开 发 经 验 。 
有 简单 图 像 处 理 的 经 验 。 
. 有 一 台 Intel 架 构 的 Mac 电 脑 (Macbook Pro, Macbook Air. Mac Pro 或 Mac Mini) 。 


: 如 果 加 入 了 iOS 开 发 者 计划 ， 还 可 以 准备 一 台 iOS 移 动 设备 。 


如 何 阅读 本 书 


每 个 人 的 阅读 习惯 都 不 相同 ， 而 且 本 书 并 不 是 一 本 从 Swift 语法 讲 起 的 基础 “开荒 ” 书 。 所 以 我 还 是 建议 你 先 找 一 本 Swift 2.X 的 语法 书 学 起 ， 在 有 了 一 定 的 Swift 语 言 基 础 以 后 ， 再 开始 阅读 本 书 ， 跟 着 
实践 操作 一 步 步 完 成 Instagram 项 目 。 


在 阅读 本 书 的 过 程 中 ， 我 们 可 能 会 遇 到 语法 错误 、 编 译 错误 、 网 络 连接 错误 等 情况 ， 不 用 着 急 ， 根 据 调 试 控制 台中 的 错误 提示 ， 去 分 析 产 生 Bug 的 原因 ， 或 者 通过 与 本 书 所 提供 的 源码 进行 对 比 ， 找 出 
问题 所 在 。 


本 书 采 用 循序 渐进 的 方式 ， 这 也 就 意味 着 在 第 5 章 出 现 的 知识 点 ， 有 可 能 在 第 12 章 还 会 出 现 。 这 样 就 可 以 使 广大 读者 有 机 会 多 次 去 学 习 和 巩固 该 知识 点 所 能 够 解决 的 问题 ， 效 果 会 更 好 。 
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OE ”创建 项 目 并 集成 LeanCloud SDK 

' 第 2 章 ”创建 用 户 登 录 界 面 

* 第 3 章 ”创建 用 户 注册 界面 

` 第 4 章 ”注册 视图 中 编写 与 界面 相关 的 代码 
. 第 5 章 ”设置 注册 页 面 的 用 户头 像 


| 第 6 章 提交 用 户 注 册 信 息 到 LeanCloud 


第 8 章 ”创建 项 目 并 集成 LeanCloud SDK 
第 9 章 ”调整 注册 和 登录 界面 的 布局 


- 第 10 章 ”美化 Instagram 


第 1 章 ”创建 项 目 并 集成 LeanCloud SDK 


在 真正 创建 Instagram 仿 真 项 目 之 前 ， 让 我 们 先 了 解 下 BaaS (Backend as a Service， 后 端 即 服务 ) 的 相关 知识 。 试 想 一 下 ， 现 在 大 部 分 的 手机 应 用 (App) 都 需要 和 后 端 服务 器 进行 交互 ， 小 到 用 户 
登录 、 和 存储 关键 信息 ， 大 到 数据 分 析 、 实 时 监控 和 直播 。 不 借助 移动 网 络 并 使 用 后 台数 据 服务 的 单机 应 用 现在 真是 屈指 可 数 了 。 


BaaS 可 以 为 我 们 做 什么 呢 ? 它 主要 为 移动 应 用 开发 者 提供 各 种 移动 后 端 服 务 ， 帮 助 移动 (网 页 ) 应 用 开发 者 将 他 们 的 应 用 与 后 端 云 储存 和 后 端 应 用 开放 的 API 连 接 ， 同 时 提供 了 用 户 管理 、 推 送 通知 以 
及 与 社交 网 络 服 务 整 合 等 功能 。 这 些 服务 的 提供 是 通过 使 用 定制 的 软件 开发 工具 (SDK) 和 应 用 程序 接口 (API) 来 实现 的 ， 如 图 1-1 所 示 。 


| eanCloud 


图 1-1 用 户 通过 iPhone 的 Appb 与 LeanCloud 云 端 进行 数据 交互 
当 用 户 使 用 手机 打开 某 个 App 以 后 ，App 会 通过 特定 API 与 BaaS 平 台 的 服务 进行 数据 交换 和 处 理 ， 并 将 需要 的 数据 或 处 理 结果 反馈 给 当前 用 户 或 其 他 用 户 。 


在 国内 ， 也 有 几 个 老牌 的 MBaaS (Mobile Backend as a Service， 移 动 后 端 即 服 务 ) 平台 ，LeanCloud 就 是 其 中 一 个 ， 通 过 它 所 提供 的 服务 ， 我 们 再 也 不 需要 租用 服务 器 ， 也 不 需要 编写 后 端 代码 。 
LeanCloud 平 台 提 供 了 一 站 式 后 端 云 服 务 ， 从 数据 存储 、 实 时 聊天 、 消 息 推送 到 移动 统计 ， 涵 盖 应 用 开发 的 多 方面 后 端 需求 。 


在 国外 ， 最 著名 的 BaaS 平 台 就 是 广大 程序 员 所 熟知 的 Parse， 它 的 出 名 不 仅仅 是 因为 它 的 广泛 用 户 群体 ， 更 重要 的 是 在 Facebook 收 购 它 以 后 ， 出 于 对 自身 竞争 力 的 考虑 ， 决 定 在 2017 年 年 初 关 闭 
Parse， 并 将 Parse 的 源 代码 开源 。 


1.1 访问 LeanCloud 


步骤 1 浏览 器 中 访问 leancloud.cn， 注 册 一 个 账号 ， 如 果 之 前 注册 过 则 直接 登录 ， 如 图 1-2 所 示 。 


| @ https://leancloud.cn/applist.htmif/apps 


L (Om Q AREA 


昨日 请 求 


存储 wm 分析 f 


图 1-2 ”在 浏览 器 中 访问 leancloud.cn 


步骤 2 在 应 用 程序 列表 中 单 击 创建 应 用 按钮 ， 输 入 新 应 用 名 称 ， 这 里 设置 为 Instagram， 单 击 创建 按钮 ， 如 图 1-3 所 示 。 


图 1-3 ”在 LeanCloud 云 端 创 建 Insta-gram 应 用 


步骤 3 在 LeanCloud 云 端 创建 好 后 台 应 用 程序 以 后 ， 单 击 该 应 用 标签 右上 角 的 齿轮 图 标 便 进 入 到 Insta-gram 程 序 的 配置 页 面 。 在 该 页 面 中 单 击 顶端 帮助 菜单 中 的 快速 入 门 ， 如 图 1-4 所 示 。 


cloud.cn/app.html?appid=2NL5pkgYfnrMXkbf17w5rU62-gzGzoHsz#/general 


图 1-4 从 菜单 中 找到 快速 入 门 


步骤 4 在 快速 入 门 页 面 中 选择 好 开发 平台 (iOS) 和 应 用 (Instagram) ， 就 可 以 根据 下 面 的 步骤 将 LeanCloud SDK 集 成 到 项 目 之 中 了 。 


1.2 创建 Xcode 项 目 一 一 Instagram 


在 LeanCloud 云 端 创建 好 Instagram 应 用 以 后 ， 我 们 还 需要 在 Xcode 中 创建 一 个 iOS 项 目 。 


步骤 1 运行 Xcode 8 (截止 到 目前 还 是 beta 版 ) ， 在 欢迎 菜单 中 选择 Create a new Xcode project。 从 项 目 模板 面板 中 选择 iOS 一 Application 一 Single View Application， 如 图 1-5 所 示 。 


图 1-5 Xcode 项 目 模 板 选择 对 话 框 


步骤 2 在 模板 设置 对 话 框 中 设置 Project Name 为 Instagram; Team 为 你 开发 用 的 ApplelD 账 号 ; Organization Name 为 开发 团队 或 个 人 的 名 称 ， 可 任意 填写 ; Organization ldentifier 为 组 织 标识 ， 
推荐 为 一 个 域名 的 反 向 ， 比 如 这 里 的 cn.liuming; Bundle Identifier 会 被 自动 设置 为 Organization Identifier 与 Product Name 的 整合 ; Language 为 Swift，Devices 为 iPhone; 剩 下 的 三 个 选项 全 都 不 用 义 
选 ， 如 图 1-6 所 示 ， 单 击 Next 按 钮 。 


Product Name: Instagram _ 


Team:  ming liu 


m mm n omm -a 


Organization Name: 
Organization Identifier: cn.liuming 
Bundle Identifier: cn.liuming.Instagram 


Language: 


Devices: iPhone 


| |Use Core Data 
| |include Unit Tests 
|_| include UI Tests 


图 1-6 ”设置 Instagtam 应 用 的 基础 选项 


步骤 3 ”在 确定 好 项 目 保 存 的 本 地 磁盘 位 置 以 后 ， 单 击 Create 按 钮 ， 便 成 功 创建 'OS 项 目 一 一 Instagram。 图 1-7 所 示 是 该 项 目 在 Xcode 8 中 的 工作 界面 。 


图 1-7 Xcode 的 工作 界面 


接 下 来 ， 需 要 将 LeanCloud SDK 集 成 到 Instagram 项 目 之 中 了 。 


1.3 将 LeanCloud SDK 集 成 到 iOS 项 目 中 


安装 LeanCloud SDK 到 iOS 项 目 有 两 种 不 同 的 方式 : 一 是 通过 CocoaPods 方 式 ， 一 是 通过 手动 安装 方式 。 如 果 你 对 CocoaPods 有 所 了 解 的 话 ， 肯 定 首选 这 个 ， 因 为 它 大 大 简化 了 安装 过 程 并 且 易 于 维 
护 。 好 在 这 一 过 程 并 不 复杂 ， 让 我 们 开始 吧 ! 


步骤 1 根据 LeanCloud 入 门 引 导 ， 在 Xcode 导 航 区 域 的 Instagram 项 目 图 标 (SACR) 上 单 击 鼠标 右键 (Control-Click) ， 在 弹出 的 快捷 菜单 中 选择 New File， 如 图 1-8 所 示 。 


Q A O 


二 | Instagram 


Show In FInder 
Open with External Editor 
Open As » 


Show File Inspector 


New File... 
Add Files to "Instagram"... 


Delete 


图 1-8 在 Instagtam 项 目 中 添加 一 个 新 文件 


步骤 2 ”在 新 文件 模板 中 选择 Other 一 Empty， 单 击 Next 按 钮 。 设 置 文件 名 为 Podfile 后 ， 单 击 Create 按 钮 ， 如 图 1-9 所 示 。 


步骤 3 ”在 项 目 导 航 中 选中 Podfile 文 件 ， 并 添加 下 面 的 代码 到 文件 中 。 


use frameworks! 
target 'Instagram' do 


pod 'AVOSCI 


loud' 


oudIM' 


pod 'AVOSCI 
end 


LloudCrashReporting' 


# 
# 
# 
# 
# 


LeanCloud SDK 只 能 作为 动态 框架 集成 到 项 目 中 
Instagram 是 项 目的 名 称 

LeanCloud 基础 模块 

IM 模块 

前 渍 报告 模块 


图 1-9 ”选择 新 建文 件 类 型 


Podfile 文 件 的 第 一 行 代表 我 们 所 安装 的 LeanCloud SDK 必 须 作为 动态 框架 集成 到 项 目 中 。 然 后 是 对 Instagram 项 目 添加 三 个 模块 : AVOSCloud、AVOSCloudIM 和 AVOSCloud-CrashReporting。 其 
中 ， 第 一 个 模块 是 必须 添加 的 ， 后 面 两 个 是 可 选 的 。 


Qum 在 LeanCloud SDK 的 框架 中 所 有 模块 名 称 都 是 以 AVOS 开 头 的 ， 这 是 为 什么 呢 ? 据说， 当时 该 平台 的 名 称 就 叫 作 AVOSCloud, 但 是 担心 国内 对 使 用 AV 一 词 有 被 屏蔽 的 风险 ， 所 以 就 改 成 了 
LeanCloud。 


步骤 4 ”关闭 Xcode， 打 开 Mac 系 统 的 终端 程序 ， 进 入 当前 的 Instagram 项 目 文件 夹 中 ， 也 就 是 含有 Podfile 文 件 层 级 的 目录 。 执 行 pod install 命 令 。 


liumingdeMBP:Instagram liuming$ 1s 

Instagram Instagram.xcodeproj Podfile 
liumingdeMBP:Instagram liuming$ pod install 

Analyzing dependencies 

Downloading dependencies 

Installing AVOSCloud (3.3.5) 

Installing AVOSCloudCrashReporting (3.3.5) 

Installing AVOSCloudIM (3.3.5) 

Generating Pods project 

Integrating client project 

[!] Please close any current Xcode sessions and use ^Instagram.xcworkspace' for this 
project from now on. 


Pod installation complete! There are 3 dependencies from the Podfile and 3 total 
pods installed. 


通过 CocoaPods 方 式 在 Instagram 项 目 中 安装 好 LeanCloud SDK 框 架 以 后 ， 就 可 以 在 项 目 中 使 用 AVOSCIloud 模 块 提供 的 API 了 。 


如 果 你 的 Mac Os 系 统 还 没有 安装 过 CocoaPods 的 话 ， 可 以 使 用 手机 或 平板 扫 摘 下 方 的 二 维 码 ， 如 图 1-10 所 示 ， 观 看 在 Mac OS 系统 上 安装 CocoaPods 的 视频 教程 。 


图 1-10 ”在 Mac OS 系统 中 安装 CocoaPods 的 视频 教程 


在 Mac OS 系统 的 Finder 中 打开 Instagram 项 目 ， 注 意 ， 此 时 我 们 需要 打开 的 项 目 文件 不 再 是 Instagram.xcodeproj， 而 是 Instagram.xcworkspace。 只 有 打开 这 个 文件 ，Instagram 项 目 中 才 
会 包含 LeanCloud SDK。 


当 上 面 的 这 些 步 又 操作 完成 以 后 ， 在 项 目 导航 中 看 起 来 应 该 是 如 图 1-11 所 示 的 样子 。 


v B instagram 


» AppDelegate.swift 


Lm NW 


a ViewController.SwiTt 
Main.storyboard 
ets.xcassets 


LaunchScreen.storyboard 
Info.plist 
» Products 


> Frameworks 

v Pods 

Pb X— AVOSCIoud 

b X AVOSCloudCrashReporting 
 — AVOSCIoudIM 


» Targets Support Files 


图 1-11 在 Xcode 中 添加 AVOSCloud 框 架 后 的 效果 


我 们 所 打开 的 Instagram.xcworkspace 实 际 上 是 一 个 Xcode 的 工作 区 ， 在 该 工作 区 中 一 共有 两 个 项 目 : Instagram 和 Pods。Pods 就 是 通过 CocoaPods 自 动 生成 的 项 目 ， 该 项 目 维护 着 Instagram 项 目 所 
依赖 的 第 三 方 库 一 一 LeanCloud SDK, 


全 注意 iOS 兴 8.0 开 始 支持 动态 库 ， 所 以 请 确保 你 的 项 目 只 支持 iOS 8 及 以 上 版 本 。 


1.4 ”初始 化 LeanCloud SDK 


接 下 来 ， 我 们 需要 在 项 目 中 添加 一 些 文件 和 代码 ， 对 LeanCloud SDK 进 行 初始 化 。 
由 于 Instagram 项 目 是 Swift 语言 项 目 ， 而 加 载 的 第 三 方 库 LeanCloud SDK 是 Objective-C 语 言 的 项 目 ， 因 此 在 Swift 项 目 中 调用 Objective-C 语 言 的 AP1， 需 要 我 们 在 Instagram 中 添加 一 个 桥接 文件 。 


CURT 在 项 目 导 航 中 选择 Instagram 组 (黄色 图 标的 ) ， 右 击 鼠 标 在 菜单 中 选择 New File， 在 新 文件 模板 面板 中 选择 iOS 一 Cocoa Touch Class 创 建 一 个 新 类 ， 在 新 文件 选项 面板 中 将 Language 设 置 


为 Objective-C， 其 他 按 默 认 值 即 可 ， 单 击 Next 和 Create 按 钮 。 此 时 ，Xcode 会 弹出 一 个 新 的 对 话 框 ， 提 示 是 否 配置 一 个 Objective-C 的 桥接 头 文 件 ， 单 击 Create Bridging Header 按 钮 ， 如 图 1-12 所 示 。 
此 时 ， 在 项 目 中 创建 了 Instagram-Bridging-Header.h 文 件 和 另外 两 个 Objective-C 的 类 文件 : xxxxx.h 和 Xxxxx.m。 


Adding this file to Instagram will create a mixed Swift and Objective-C target. 
Would you like Xcode to automatically configure a bridging haader to enable 
classes to be accessed by both languages? 


Cancel Don't Create | Create Bridging Header 


Class: TableViewCell 
Subclass.. UlTableViewCell 
 |Aiso create XIB file 


Objective-C 


E Previous 


图 1-12 Zi Instagram] Objective-C 8 44% 3k X4 


步骤 2 ”在 项 目 导 航 中 选中 删除 xxxxx.h 和 xxxxx.m 文 件 ， 并 将 其 移动 到 垃圾 桶 (Move to Trash) 。 然 后 打开 Instagram-Bridging-Header.h 文 件 ， 在 该 文件 中 添加 下 面 的 代码 : 


#import «AVOSCloud.h» 


经 过 上 面 的 两 步 操作 ， 现 在 我 们 就 可 以 在 Instagram (Swift 语言 ) 项 目 中 随意 调用 AVOSCloud (Objective-C 语 言 ) 的 API 函 数 了 ， 而 且 调 用 语法 还 是 保持 着 swift 风 格 。 


步骤 3 ”添加 下 面 的 代码 到 application( :didFinishLaunchingWithOptions:) 方 法 中 ， 当 应 用 程序 启动 后 会 首先 调用 该 方法 ， 我 们 可 以 在 这 里 进行 最 基础 的 设置 ， 比 如 这 里 通过 AVOSCloud API 让 应 用 


zh 


程序 连接 到 LeanCloud 云 端 平台 。 


func application( application: UlApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool { 
AVOSCloud.setApplicationId ("2NL5pkgYfnrMXkbfl7w5rU62-gzGzoHsz", 
clientKey: "6S15rQalyXh90CE0126b2gaJ") 
// 如 果 想 跟踪 统计 应 用 的 打开 情况 ， 可 以 添加 下 面 一 行 代码 
AVAnalytics.trackAppOpened (launchOptions: launchOptions) 
return true 


通过 AVOSCloud 类 的 setApplicationld( :clientKey:) 方 法 ， 可 以 让 应 用 程序 连接 到 LeanCloud 云 端 ， 它 带 有 两 个 参数 : 第 一 个 参数 applicationld 是 在 LeanCloud 中 创建 的 应 用 程序 ld， 第 二 个 参数 
clientKey 是 LeanCloud 应 用 中 的 client key。 我 们 可 以 在 LeanCloud 云 端 中 的 Instagram 控 制 台 里 面 找 到 相关 的 Key 值 ， 然 后 直接 复制 即 可 ， 如 图 1-13 所 示 。 


E (O)instagam — co me Qae Aor Har cam  C)ay 


实名 认证 通知 : 按 国家 法 律 法 规 的 要 求 ， 需 要 对 所 有 使 用 了 LeanCloud 云 引 擎 网 站 托管 服务 的 用 户 进行 实名 认证 。 
户 ， 将 无 法 继续 使 用 该 项 服务 ， 请 大 家 尽快 登录 控制 台 完 成 这 一 手续 。 (没有 使 用 网 站 托管 服务 的 用 户 请 忽略 |) 


基本 信息 App ID 
ZNL5pkgYfnrMXkbf17w5rU62-gzGzoHsz 
每 个 app 有 一 个 唯一 D, 不 可 变更 
App Key 
6S15rüalyXh98CE0i26b2gaJ 
适用 于 所 有 平台 


图 1-13 ”在 LeanCloud 平 台 查 看 Key 信 息 


步骤 4 在 AVAnalytics.trackAppOpened(launchOptions:launchOptions) 代 码 的 下 面 ， 添 加 下 面 的 代码 : 


AVAnalytics.trackAppOpened (launchOoptions: launchOptions) 
let testObject = AVObject(className: "TestObject") 
testObject?.setObject("bar", forKey: "foo") 
testObject?.save () 

return true 


通过 上 面 的 代码 ， 我 们 首先 创建 了 一 个 AVObject 类 型 的 对 象 ， 该 对 象 相当 于 云端 TestObject 数 据 表 中 的 一 条 数据 记录 。 因 为 是 新 建 ， 所 以 该 记录 应 该 是 全 新 的 ， 并 且 等 待 着 人 存储 到 云端 的 TestObject 数 
据 表 里 面 。 


如 果 在 云端 的 Instagram 应 用 中 没有 TestObject 数 据 表 的 话 ，AVObject 对 象 会 自动 创建 它 。 该 对 象 将 foo 字 段 的 值 设 置 为 bar， 如 果 TestObject 中 没有 foo 字 段 的 话 ，AVObject 也 会 自动 创建 该 字段 。 
最 后 ， 保 存 这 条 记录 到 云端 的 TestObject 数 据 表 里 面 。 


Qa 除了 使 用 setObject(_:forKey key) 方 式 添 加 数据 到 TestObject 对 象 以 外 ， 还 可 以 利用 AVObject 类 的 脚 标 方 式 添 加 数据 ， 


let testObject = AVObject(className: "TestObject") 


// testObject?.setObject("bar", forKey: "foo") 
testObject?["foo"] = "bar" 
testObject?.save () 


步骤 5 构建 并 运行 项 目 ， 一 个 类 名 为 TestObject 的 新 对 象 会 被 友 送 到 LeanCloud 云 端 并 保存 下 来 。 当 程序 启动 以 后 ， 在 LeanCloud 上 访问 控制 台 一 数据 管理 就 可 以 看 到 上 面 创建 的 TestObject 的 相关 
数据 ， 如 图 1-14 所 示 。 


0 
o | 
0 | 
o | 
0 | 
0 
0 


| 


图 1-14 ”在 LeanCloud 云 端的 Instagram 应 用 中 查看 添加 的 数据 


在 LeanCloud 云 端的 TestObject 数 据 表 中 ， 除 了 foo 字 段 以 外 ， 每 条 记录 都 会 默认 有 一 个 objectld 字 段 ， 作 为 记录 的 唯一 标识 ; ACL 字 段 与 认证 相关 ; createdAt 代 表 该 条 记录 的 创建 时 间 ; updatedAt 
代表 该 条 记录 的 修改 时 间 。 


当 LeanCloud SDK 测 试 成 功 以 后 ， 就 可 以 删除 之 前 的 测试 代码 了 ， 删 除 下 面 的 代码 : 


let testObject = AVObject(className: "TestObject") 
// testObject?.setObject("bar", forKey: "foo") 
testObject?["foo"] = "bar2" 

testObject?.save|() 


本 章 小 结 


本 章 我 们 学 习 了 如 何在 LeanCloud 云 端 创建 Instagram 应 用 ， 在 Xcode 中 创建 一 个 Single View Application 类 型 的 iOS 应 用 程序 项 目 ， 以 及 通过 CocoaPods 方 式 安装 LeanCloud SDK 到 Xcode 项 目 中 的 
Jik. 


当 我 们 开发 iOS 应 用 时 ， 会 经 常 使 用 到 各 式 各 样 的 第 三 方 开源 类 库 ， 比 如 JSONKit、AFNetWorking 等 。 可 能 某 个 类 库 又 用 到 其 他 类 库 ， 所 以 要 使 用 它 ， 必 须 下 载 所 有 需要 用 到 的 类 库 ， 而 手动 一 个 个 下 
载 所 需 类 库 十 分 麻烦 。 此 外 ， 项 目 中 用 到 的 类 库 如 果 有 更 新 ， 就 必须 下 载 新 版 本 ， 重 新 加 入 到 项 目 中 。 面 对 这 样 的 情况 ，CocoaPods 成 为 一 个 非常 好 的 选择 。CocoaPods 是 iOS 最 常用 且 最 有 名 的 类 库 管 理 
工具 ， 上 述 两 个 烦人 的 问题 ， 通 过 CocoaPods， 只 需要 一 行 命令 就 可 以 完全 解决 ， 当 然 前 提 是 你 必须 正确 设置 它 。 重 要 的 是 ， 绝 大 部 分 有 名 的 开源 类 库 ， 都 支持 CocoaPods。 因 此 ， 作 为 iOS 程 序 员 ， 掌 握 
CocoaPods 的 使 用 是 必 不 可 少 的 基本 技能 。 


第 2 草 ”创建 用 户 登 录 界 面 


让 我 们 从 上 一 章 的 LeanCloud 云 端 回 到 Xcode 8， 因 为 在 利用 模板 生成 项 目的 时 候 ，Device 设 置 成 了 iPhone， 所 以 当 打 开 Main.storyboard 故 事 板 文件 的 时 候 ， 只 能 看 到 一 个 iPhone 屏幕 大 小 的 视图 ， 
我 们 会 一 直 沿 用 这 个 大 小 的 屏幕 视图 。 


2.1 ”从 故事 板 中 创建 视图 


对 于 iOS 应 用 程序 开发 来 说 ,我们 总 是 要 从 用 户 界面 开始 构建 项 目 ， 这 是 因为 移动 端的 应 用 程序 都 是 基于 用 户 交互 的 ， 大 部 分 的 代码 都 是 在 用 户 单 击 按钮 或 者 是 划 动 屏幕 之 后 才 被 执行 的 。 


步骤 1 从 通用 工具 区 域 的 对 象 库 (快捷 键 “control+option+command+3”) 中 找到 View Controller， 将 该 对 象 拖 灸 到 故事 板 中 View Controller 视 图 的 右 侧 ,再 拖 蝶 另 一 个 View Controller 到 之 
前 View Controller 的 右 侧 ， 如 图 2-1 所 示 。 


步骤 2 在 项 目 导 航 中 删除 Single View Application 模 板 为 我 们 自动 创建 的 ViewCon-troller.swift 文 件 ， 在 弹出 的 对 话 框 中 单 击 Remove Reference 按 钮 。 然 后 在 Instagram 组 (黄色 图 标 ) AHR 
标 ， 在 弹出 的 快捷 菜单 中 选择 New File， 在 新 文件 模板 选择 面板 中 选择 iOs 一 Source 一 Cocoa Touch Class， 单 击 Next 按 钮 ， 如 图 2-2 所 示 。 


Qi: 删除 对 话 框 中 的 Remove Refetence 选 项 代表 只 删除 该 文件 在 项 目 中 的 链接 ， 而 不 真正 删除 项 目 中 的 文件 。Move to Trash 则 真正 删除 项 目 中 的 文件 。 


instagram | Build Instagram: Succeeded | Today at 上 午 5:25 


88 € > instagram ) — Instagram ) ly Main.storyboard ) Bl) Main.storyboard (Base) ) No Selection 


— through a hierarchy of views. 


n 
j controller that manages a table view. 


©® Filter EO View as: iPhone 6s («C »R) 5 B tol IM | BB (rine 


图 2-1 在 故事 板 中 新 添加 2 个 View Controller 


步骤 3 ”在 文件 选项 面板 中 ， 将 Class 设 置 为 SignlnVC，Subclass of 设置 为 UIView-Controller，Language 设 置 为 Swift， 单 击 Next 按 钮 。 使 用 默认 的 存储 位 置 ， 单 击 Create 按 钮 。 


Cocoa Touch 
Class 


图 2-2 ”选择 新 添加 文件 的 类 弄 


步骤 4 因为 在 故事 板 中 一 共 创建 了 三 个 控制 器 对 象 ， 所 以 在 代码 中 也 要 相应 地 创建 三 个 视图 控制 器 类 。 重 复 上 一 步 的 操作 ， 再 创建 SgnUpPVC 和 ResetPasswordVC 两 个 控制 器 类 。 注 意 ，Subclass of 
都 确保 设置 为 UIViewController， 如 图 2-3 所 示 。 


步骤 5 ” 回 到 Main.storyboard， 在 编辑 区 域 中 选择 左边 第 一 个 视图 控制 器 ， 然 后 打开 通用 工具 区 域 的 ldentity Inspector (快捷 键 “option+command+3”) ， 将 Custom Class 部 分 中 的 Class 设 置 为 
SignInVC。 使 用 同样 的 方法 ， 将 第 二 个 视图 控制 器 的 Class 设 置 为 SignUPVC， 将 第 三 个 视图 控制 器 的 Class 设 置 为 ResetPasswordVC， 如 图 2-4 所 示 。 


|UlViewController 


' Also create XIB file 
Swift 


Merxi 


图 2-3 ”创建 SignUpVC 控 制 器 类 


BE A instagram ) lj iPhone SE Instagram | Build Instagram: Succeeded | Today at 上 午 5:25 


Storyboard Reference 
placeholder for a view controller in an 


` 
E 
, 


~ external storyboard. 


图 2-4 在 故事 板 中 关联 三 个 控制 器 类 


通过 步骤 5 的 操作 ， 我 们 可 以 分 别 在 新 创建 的 三 个 类 中 控制 故事 板 中 的 三 个 控制 器 视图 了 。 


2.0 ”搭建 用 户 的 登录 界面 


故事 板 中 最 左 侧 的 视图 现在 与 SignlnVC 类 关联 ， 接 下 来 需要 在 这 个 视图 上 创建 用 户 的 登录 界面 ， 该 界面 包括 两 个 Text Field 和 三 个 Button。 
步骤 1 在 对 象 库 中 找到 Text Field. (利用 对 象 库 底 部 的 过 滤 框 ， 可 以 进行 快速 筛选 ) ， 将 其 拖 遇 到 最 左 侧 的 视图 之 中 ， 大 小 和 位 置 如 图 2-5 所 示 。 复 制 第 二 个 Text Field， 并 将 它 放 置 在 第 一 个 的 下 方 。 


Qus 除了 使 用 Command+C 和 Command+V 进 行 复制 粘贴 以 外 ， 我 们 还 可 以 按 住 option 键 ， 然 后 从 第 一 个 Text Field 拖 慢 鼠 标 到 下 面 的 位 置 。 在 拖 避 的 时 候 ， 鼠 标 会 变 成 绿色 带 加 号 的 圆圈 ， 当 复制 完 
成 时 一 定 要 先 松 开 鼠标 再 抬 起 option 键 ， 否 则 只 是 进行 简单 的 移动 操作 。 


J A | AÀ instagram ) Wil iPhone SE | instagram | Build instagram: Succeeded | Today at 05:25 
ar a Aà omo mm...» B instagram ) D instagram | —— Bi Main.storyboard (Base) ) E Sign nvC Scene ) (D Sign inve ) [7] View ) [F] Round Style Text Fieid € A» 


v [Bl Sign inVC Scene 
v Q sign vc 
E Top Layout Guide 
[Gi Bottom Layout Guide 
v [3 view 


[F | Round Style Text Field 
 [F ] Round Style Text Fieid 
(i First Responder 
[Bi exit 
— Storyboard Entry Point 


| > fl view Controller Scene 


> 图 view Controller Scene 


x 
Object O m7r-Uq-H7m 
Lock [herhed - (Nothing) 
Nows NF = wem — [2 D - 


ct editable text and sends an action 
message to a target object when Re.. 


|| |&9 Filter Kl View as: iPhone 6s («C ^R) 
图 2-5 ”在 SignInVC 视 图 中 创建 2 个 Text Field 


步骤 2 选中 上 边 的 Text Field 控 件 ， 在 Attributes Inspector (快捷 键 “Command+option+4”) 中 将 Placeholder 设 置 为 用 户 名 ，Clear Button 设 置 为 Is always visible。 使 用 同样 的 方法 ， 将 下 面 


Text Field 的 Placeholder 设 置 为 密码 ， 同 样 将 Clear Button 设 置 为 ls always visible。 同 时 ， 一 定 要 勾 选 Secure Text Entry， 如 图 2-6 所 示 。 


Placeholder | 密码 | 
+ Background | Background Image HB 


十 Disablad | Disabled Background Image By 


Border Style | i. O O 
Clear Button | 15 always visible 
| ' | Clear when editing begins 
Min Font Size | | 07 [v] 
四 Adjust to Fit 


Capitalization | None i 


Correction L Defa ult 


Spell Checking | Default 


Keyboard Type | Default a 
Appearance | Default B 


Return Key | Default. 
M Auto-enable Return Ke 


Secure Text Entry 


图 2-6 设置 密码 Text Field 的 属性 


Clear Button 代 表 清 除 按钮 ， 它 会 出 现在 Text Field 的 最 右边 。 当 Text Field 中 包含 文字 内 容 的 时 候 ， 可 以 借助 Clear Button 清 除 文本 信息 。Clear Button 在 什么 时 候 出现 ， 这 取决 于 所 设置 的 属性 值 ， 


属性 值 有 以 下 几 种 情况 : 
.nevet: 清除 按钮 永 不 出 现 ， 是 Clear Button 的 默认 属性 值 。 
- whileEditing: 只 有 在 Text Field 处 于 编辑 状态 的 时 候 才 会 出 现 。 
- unlessEditing: 只 有 在 Text Field 处 于 非 编 辑 状态 的 时 候 才 会 出 现 。 
- always: Clear Button 不 管 什 么 时 候 都 会 出 现在 Text Field 的 右边 。 


步骤 3 ”从 对 象 库 中 拖 忠 一 个 Button 到 Text Field 的 下 面 ， 调 整 好 按钮 的 位 置 和 宽度 ， 确 保 处 于 选中 状态 ， 在 Attributes Inspector 中 将 Title 设 置 为 登录 。 为 了 美观 ， 可 以 在 登录 两 个 字 中 间 添 加 空格 。 


再 复制 一 个 登录 按钮 ， 将 其 放 在 之 前 按钮 右边 对 应 的 位 置 ， 并 将 Title 改 为 注册 。 再 添加 第 三 个 按钮 ， 将 它 放 置 在 Text Field 和 刚才 两 个 Button 之 间 的 位 置 。 在 Attributes Inspector 中 修改 字号 为 13， 在 Size 
Inspector 中 将 width 和 height 分 别 设 置 为 100 和 14， 在 Alignment 中 将 Horizontal 设 置 为 左 对 齐 ， 将 Title 设 置 为 忘记 密码 ? 如 图 2-7 所 示 。 
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图 2-7 设置 “忘记 密码 ? ”按钮 的 属性 


« À » 


D OBY OO 


| Button 


Type | System i 
State Config Defaut  — 1 B 
Title | Plain i 


忘记 密码 ? 


十 Font | System 13.0 
Text Color | BENI | Default 
Shadow Color | C= | Default i 
Image |Defautmage B 
Background | Default Background Image 图 


Shadow Offset | 90/7 | 9 
Width Height 
| | Reverses On Highlight 
Drawing | | Shows Touch On Highlight 
(B Highlighted Adjusts Image 


Disabled Adjusts Image 


Line Break | Truncate Middle i 
Edge Content ii 


Inset | mu 0| | 


步骤 4 选中 登录 按钮 ， 在 Attributes Inspector 中 设置 Text Color 为 White Color，Back-ground 为 亮 监 色 。 选 中 注册 按钮 ， 同 样 设置 Text Color 为 White Color， 但 Background 为 亮 橘 色 ， 如 图 2-8 所 


步骤 5 按 住 control 键 ,然后 在 注册 按钮 上 拖 忠 鼠标 到 右 侧 的 第 二 个 视图 控制 器 上 ， 在 弹出 的 快捷 菜单 中 选择 Present Modally， 如 图 2-9 所 示 。 


构建 并 运行 项 目 ， 当 我 们 单 击 注册 按钮 的 时 候 ， 马 上 会 跳 转 到 注册 视图 ， 只 不 过 现在 的 注册 视图 上 ， 我 们 还 没有 搭建 任何 的 用 户 界面 控件 。 而 神奇 的 是 ， 在 这 一 过 程 中 我 们 并 没有 编写 任何 的 代码 。 


| 用 户 名 


区 


扎 记 密码 ? 


图 2-8 设置 按钮 的 背景 颜色 


Mode Scale To Fill 
Semantic Unspecified 
Tag | 


Interaction (fJ User Interaction Enabled 
(^ Multiple Touch 


Alpha. 


Tint BENE | Default 


Drawing | Opaque 
Clears Graphics Context 
| | Clip Subviews 
Autoresize Subviews 
Je 
X 


Action Segue 
Show 


Show Detail 
Present Modally 
Present As Popover 
Custom 

Non-Adaptive Action Segue 
Push (deprecated) 
Modal (deprecated) 


图 2-9 ”为 注册 按钮 与 第 二 个 视图 创建 Segue 过 渡 


2.3 为 SignlInVC 关 和 视图 创建 Outlet 和 Action 天 联 


2.3.4 ”什么 是 Outlet 和 Action 


Outlet 和 Action 是 将 视图 控制 器 类 (存储 在 swift 文 件 中 的 类 ) 和 界面 视图 (故事 板 中 的 控制 器 视图 ) 关联 起 来 ， 并 进行 交互 的 两 种 方式 。 这 两 种 方式 比较 相似 ， 但 它们 最 终 实现 的 目的 不 同 。 


Outlet “代码 类 与 故事 板 中 视图 之 间 的 对 话 要 利用 Outlet 关 联 。 任 何 的 UI 元 素 (UILabel、UIButton、Ullmage、UIView 等 ) 都 可 以 通过 Outlet 方 式 关联 到 视图 控制 器 。 当 我 们 在 代码 类 中 使 用 
@IBOutlet 关 键 字 实现 Outlet 关 联 以 后 ， 那 么 : 


. 可 以 通过 编写 代码 的 方式 更 新 UILabel 等 控件 的 文本 或 设置 UIView 的 背景 颜色 。 
. 可 以 获取 到 用 户 界 面 控件 的 状态 和 消息 ， 比 如 UIStepper 当 前 的 值 ，NSAttributed-String 的 字号 等 。 


Action ”视图 传递 消息 到 控制 器 代码 类 则 需要 使 用 Action。Action 在 视图 控制 器 中 是 一 个 方法 ， 这 与 @IBOutlet 关 键 字 不 同 ， 它 使 用 的 是 @IBAction 关 键 字 。 只 要 有 指定 的 事件 发 生 ，Action 就 会 从 视 
图 传递 一 条 消息 到 视图 控制 器 代码 类 。Action (或 者 说 Action method) 就 会 在 接 到 消息 以 后 执行 相关 的 代码 。 


Quia Action 只 能 被 设置 在 UIConttol 的 子 类 上 ， 这 就 意味 着 不 能 在 UILabel 或 UIView 上 设置 Action。 
2.32 为 SignlnVC 创 建 Outlet 


步骤 1 在 项 目 导航 中 打开 Main.storyboard 故 事 板 文件 ， 并 选中 故事 板 中 最 左 侧 (负责 用 户 登 录 ) 的 视图 。 在 Xcode 的 右上 角 单 击 助手 编辑 器 模式 (有 两 个 圆圈 的 lcon) ， 如 图 2-10 所 示 。 


B IPhone SE. | instagram | Bull Instagram: Succeeded | Today at 上 午 525 rm Ir 


DAP 


| 密码 


ELER? 


o 


E] View as: iPhone €s («C »R) 一 100% + 
BB € >》 @ Automate) À SigninVC.swift } No Selection 
| 


di SigniInVC.swift 
|// Instagram 


.// Created by S$ on 16/6/23. 

ff Copyright § 2016 W$. All rights reserved. 
import UIKit 

class SignInVC: UIViewController { 


override func viewDidLoad() 4 
super,.viewDidLoadií) 


// Do any additional setup after loading the view. 


override func didReceiveMemoryWarningl() { - 
super.didReceiveMemoryWarning() View 
// Dispose of any resources that can be recreated. | 


Mode| scaleTorl — FE 


rà f1 fr m 


图 2-10 ”将 Xcode 切换 到 助手 编辑 器 模式 


Qa 在 默认 情况 下 ， 打 开 助 手 编辑 器 模式 后 ， 出 现在 编辑 区 域 的 两 个 窗口 是 左右 排列 的 ， 如 果 你 使 用 Macbook 进 行 开发 的 话 ， 屏 幕 会 显得 很 拥挤 ， 而 且 显 示 效 果 并 不 理想 。 此 时 ， 我 们 可 以 长 按 助 
手 编辑 器 按钮 ， 在 弹出 的 快捷 菜单 中 选择 Assistant Editor on Bottom， 这 样 就 成 为 了 上 下 排列 的 两 个 窗口 了 ， 如 图 2-11 所 示 。 


Assistant Editors on Right 
Y Assistant Editors on 


- p "ata a IZ E. 
" I | | 
z A o. 
d a T 
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图 2-11 将 助手 编辑 器 设置 为 上 下 排列 


如 果 在 编辑 区 域 的 主 窗口 中 选择 了 SignInVC 的 视图 ， 那 么 在 下 面 的 第 二 窗口 中 则 会 自动 打开 SignInVC.swift 文 件 。 如 果 打 开 的 不 是 该 文件 的 话 ， 则 需要 通过 第 二 窗口 顶部 的 路 径 指示 器 手动 将 其 打开 。 
单 击 Automatic 一 Instagram 一 Instagram 一 SignInVC.swift 即 可 ， 如 图 2-12 所 示 。 


[T] Manua * Instagram - — Frameworks P 
BN instagram b 


nci: \ 


@ Top Level Objects (1) 


(Q5 Localizations | 
@ Notification Payloads SigninVC.swift 
$ m rights reserved. a) SignUpVC.swift 


import UIKit 
class SignInVC: UlIViewController { 


override func viewDidLoad() (1 
super.viewDidLoad() 


图 2-12 ”让 位 于 下 面 的 第 二 窗口 打开 指定 文件 


步骤 2 按 住 Control 键 ,在 上 边 的 Text Field 控 件 上 拖 昌 鼠标 到 下 面 窗口 的 SignlnVC 类 中 。 在 弹出 的 设置 面板 中 ， 确 定 Connection 设 置 为 Outlet， 再 将 Name 设 置 为 usernameTxt， 单 击 connect 按 
钮 ， 如 图 2-13 所 示 。 


步骤 3 ”对 下 面 的 Text Field 进 行 同 样 的 操作 ， 将 Name 设 置 为 passwordTxt， 如 图 2-14 所 示 。 


步骤 4 接 下 来 再 为 三 个 按钮 创建 Outlet 关 联 ，Name 分 别 设置 为 : signInBtn、signUp-Btn、forgotBtn， 代 码 如 下 : 


class SignlinVC: UlViewController { 


// text fields 

QGIBOutlet weak var usernameTxt: UlTextField! 
QGIBOutlet weak var passwordTxt: UlTextField! 
// buttons 

GIBOutlet weak var signInBtn: UIButton! 
GIBOutlet weak var signUpBtn: UlButton! 
GIBOutlet weak var forgotBtn: UIButton! 
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{I SignInVC.swift 
// Instagram 


/| Created by Xlt& bn 16/6/23. 
// Copyright 9 2076 年 刘 销 ，Al1 rights reserved. 


import UIKit 


class signInvc: / IViewController ( 


ert Duttel Action, or artia C lh ec thon 


super. viewDidL ON Jej 


// Do any additional setup after loading the view. 
} 


override func didReceiveMemoryWarning() 1 
super.didReceiveMemoryWarning() | | 
// Dispose of any resources that can be recreated. 


图 2-13 ”在 故事 板 和 SignInVC 类 之 间 创 建 Outlet 关 联 


| ;import UIKit 
Connection 
Object Ó Sign InVC class SignInVC: UlViewController ( 


~ QIBOutlet weak var usernameTxt: UITextField! 


Type |UITextField BB ^ override func viewDidLoad() { 


super.viewDidLoad() 


Storage (Weak — ©) 
// Do any additional setup after loading 


图 2-14 设置 passwordTxt 的 Outlet 关 联 
这 里 我 们 一 共 创 建 了 五 个 Outlet 关 联 ， 两 个 Text Field 和 三 个 Button。 当 程序 运行 时 ， 就 可 以 在 SignlnVC 类 中 通过 代码 修改 这 五 个 用 户 界面 控件 的 属性 。 实 际 上 ， 我 们 可 以 把 Outlet 属 性 理解 为 C 语 言 
中 的 指针 ， 在 程序 运行 时 它 会 指向 由 故事 板 创建 的 特定 UI 对 象 ， 可 以 访问 并 控制 该 对 象 。 


2.3.3 ”为 SignInVC 创 建 Action 


只 有 QOutlet 还 不 行 ， 当 用 户 在 屏幕 上 与 UI 对 象 交 互 的 时 人 息 ， 还 需要 让 这 些 UI 对 象 给 相应 的 代码 类 发 送 消 息 ， 这 就 需要 我 们 创建 Action 关 联 。 


步骤 1 按 住 control 键 ,在 登录 按钮 上 拖 忠 鼠标 到 下 面 窗口 的 SigniInVC 类 中 ， 因 为 创建 的 是 方法 ， 所 以 要 将 位 置 放 在 下 面 的 方法 部 分 中 。 在 弹出 的 设置 面板 中 ， 将 Connection 设 置 为 Action (非常 非 
常 的 重要 ! ) ， 再 将 Name 设 置 为 signInBtn_clicked，Type 设 置 为 UIButton， 确 定 Event 为 Touch Up Inside，Arguments 为 Sender 后 ， 单 击 connect 按 钮 ， 如 图 2-15 所 示 。 


Exit 忘记 密码 ? 
—> Storyboard Entry Poi... 
Present Modally seg... 


> 图 Sign UpVC Scene 


» [S] Reset PasswordVC Sc... 


E] View as: iPhone 6s («C ^R) 


Dd < > (Q5 Automatic) >) SigninVC.swift > [8] SigninvC 
import UIKit 


class SignInVC: UIViewController { 


li text fields |... 


Connection 


pading the view. 


图 2-15 ”为 SignInVC 添 加 Action 方 法 


当 我 们 将 Connection 设 置 为 Action 后 ， 面 板 中 的 选项 会 立即 发 生变 化 。Name 是 UI 对 象 发 送 的 消息 名 称 ， 同 时 也 是 类 中 的 方法 名 称 。Type 是 用 户 与 哪个 UI 对 象 发 生 的 交互 ， 这 里 是 UIButton Event 
代表 按钮 的 哪个 事件 被 触发 后 会 发 送 这 个 消息 ，Touch Up Inside 是 用 户 手指 在 按钮 的 上 面 抬 起 的 时 候 。 这 里 有 两 个 关键 点 : 一 是 手指 在 按钮 的 范围 内 ， 一 是 抬 起 时 ， 它 是 非常 标准 和 普通 的 按钮 动作 。 


说 到 Event 事 件 ， 与 Button 相 关 的 事件 还 有 很 多 ， 可 以 通过 Connection Inspector (快捷 键 “option+command+6”) 查看 UI 对 象 的 事件 都 有 哪些 ， 如 图 2-16 所 示 。 
选中 登录 按钮 ， 在 Connection Inspector 中 可 以 查看 登录 按钮 的 Touch Up Inside 事 件 被 触发 后 ， 会 向 SignlnVC 类 发 送 signlnBtn_clicked 消 息 ， 也 就 是 执行 SignlnVC 类 的 signlnBtn_clicked( :) 方 法 。 


步骤 2 修改 signInBtn_clicked( :) 方 法 ， 具 体 如 下 所 示 : 


// X Ada 

IBAction func signInBtn click( sender: UIButton) { 
print ("登录 按钮 被 单 击 ") 

} 


®© 


^——— 


signInBtn_clicked(_;) 方 法 带 有 一 个 参数 sender， 它 指向 的 是 触发 该 方法 的 按钮 对 象 。 如 果 有 多 个 UI 对 象 触发 该 方法 的 话 ， 我 们 可 以 通过 该 参数 判断 用 户 到 底 是 与 哪个 UI 对 象 进行 交互 。 


| Sent Events 
Did End On Exit 
Editing Changed 
Editing Did Begin 
Editing Did End 
Primary Action Triggered 


Touch Cancel 
Touch Down 
Touch Down Repeat 
Touch Drag Enter 
Touch Drag Exit 
Touch Drag Inside 
Touch Drag Outside 

( Touch Up Inside — 
Touch Up Outside 
Value Changed 


图 2-16  i&id Connection Inspectot 查 看 UI 元 素 的 关联 信息 


Print0 函 数 负责 将 字符 串 输出 到 调试 控制 人 台中， 方便 进行 调试 。 


构建 并 运行 项 目 ， 单 击 屏 幕 上 的 登录 按钮 会 在 调试 控制 台中 看 到 print0 函 数 所 打印 的 文字 信息 。 单 击 注册 按钮 ， 则 会 跳 转 到 SignUpVC 类 所 定义 的 视图 中 ， 只 


西 ， 如 图 2-17 所 示 。 
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不 过 现在 这 个 视图 里 面 还 没有 任何 的 东 
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图 2-17 测试 Action 方 法 


2.4 调整 模拟 设备 


B 芭 lol bal 


Xcode 8 默认 模拟 器 使 用 的 是 iPhone SE 设 备 ， 它 是 4 英寸 的 屏幕 。 而 我 们 在 故事 板 中 搭建 用 户 界 面 的 时 候 ， 默 认 使 用 的 是 iPhone 6s 4.7 英 寸 的 屏幕 ， 如 图 2-18 所 示 。 


EL B 上 ol Hy 
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Device | Orientation 


图 2-18 ”通过 Size Classes 特 性 调整 屏幕 尺寸 


如 果 此 时 在 模拟 器 中 运行 项 目的 话 ， 会 出 现 UI 对 象 超出 屏幕 范围 的 情况 。 在 后 面 的 课程 中 我 们 会 利用 代码 和 自动 布局 (Auto Layout) 来 解决 不 同 屏幕 尺寸 的 UI 布 局 问题 。 但 是 目前 ， 只 需 将 模拟 设备 
修改 为 jPhone 6 或 者 6s 即 可 ， 如 图 2-19 所 示 。 
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图 2-19 ”选择 模拟 的 iDS 设 备 


本 章 小 结 


开发 IQS 应 用 程序 项 目 一 般 要 从 搭建 用 户 界面 开始 ， 因 为 大 部 分 移动 端 应 用 都 是 基于 交互 的 ， 这 也 就 意味 着 只 有 用 户 在 与 某 个 UI 控件 交互 的 时 候 ， 才 会 去 执行 特定 的 方法 ， 从 而 执行 某 些 代码 。 


Outlet 和 Action 是 代码 类 与 用 户 界面 对 象 之 间 进 行 交 互 的 方式 。 通 过 Outlet 可 以 在 代码 类 中 控制 和 访问 用 户 界 面 对 象 ， 而 用 户 在 与 UI 控件 交互 以 后 就 会 发 送 特定 消息 ， 从 而 执行 代码 类 中 的 方法 。 


第 3 草 ”创建 用 户 注册 界面 


在 上 一 章 ， 我 们 在 故事 板 中 创建 了 用 户 登 录 界 面 ， 并 且 还 为 登录 视图 与 SignlnVC 代 码 类 之 间 建 立 了 Outlet 和 Action 关 联 。 本 章 我 们 将 会 创建 用 户 的 注册 界面 以 及 为 注册 界面 和 SignUpVC 代 码 类 创建 相 
应 的 Outlet 和 Action 关 联 。 


3.1 利用 滚动 视图 创建 用 尸 注册 界面 


大 家 都 知道 绝 大 部 分 应 用 的 注册 界面 一 般 包含 : 用 户 名 、 密 码 、 电 子 邮件 等 必 填 信息 。 下 面 我 们 将 具体 讲解 如 何 创建 注册 界面 。 
步骤 1 从 对 象 库 中 拖 忠 一 个 Scroll View (滚动 视图 ) 到 故事 板 中 间 的 控制 器 视图 ， 并 调整 其 大 小 为 整个 屏幕 的 尺寸 ， 如 图 3-1 所 示 。 
之 所 以 在 视图 上 添加 一 个 滚动 视图 ， 是 因为 当 用 户 在 注册 页 面 输入 用 户 信息 的 时 候 ， 弹 出 的 虚拟 键盘 会 遮挡 住 底部 的 Text Field (尽管 现在 还 没有 创建 它们 ) ， 这 将 严重 影响 用 户 输入 信息 的 体验 。 


Scroll View 是 用 来 在 屏幕 上 显示 那些 在 有 限 区 域内 放 不 下 的 内 容 。 例 如 ， 在 屏幕 上 显示 内 容 丰富 的 网 页 或 者 表单 ， 亦 或 是 很 大 的 图 片 。 在 这 种 情况 下 ， 需 要 用 户 对 屏幕 内 容 进行 拖 动 或 缩放 来 查看 屏幕 
或 窗口 区 域外 的 内 容 。 


所 以 ，Scroll View 应 该 首先 有 一 个 窗口 用 来 显示 内 容 。 其 次 ， 还 要 有 内 容 本 身 。 这 个 显示 窗口 就 是 Scroll View， 这 个 窗口 可 以 是 整个 手机 屏幕 ， 也 可 以 只 是 手机 屏幕 的 一 部 分 区 域 。 内 容 视图 
(Content View) 则 是 需要 填写 的 表单 、 查 看 的 图 片 或 者 网 页 等 信息 的 完整 视图 。 通 常 ， 其 大 小 会 超过 这 个 屏幕 ， 正 因为 如 此 ， 我 们 才 需 要 使 用 Scroll View， 如 图 3-2 所 示 。 


BE < > [instagram ) i Instagram ) [È Main.storyboard ) [i Main.st...d (Base) ) 图 view C..er Scene) Æ view Controller ) 口 ] View ) [C] Scroll view < A 》 


图 3-1 在 SignUpVC 控 制 器 视图 中 添加 一 个 滚动 视图 


以 图 3-2 为 例 ， 在 滚动 视图 对 象 中 ， 内 容 视图 会 储存 完整 的 图 片 信息 ， 而 人 在 滚动 视图 窗口 中 只 会 显示 出 一 部 分 内 容 ， 我 们 必须 借助 平移 手势 来 调整 内 容 视图 的 偏 移 量 (Content Offset) ， 或 者 是 通过 
拘 捏 手势 调整 内 容 视图 的 大 小 。 


图 3-2 ”滚动 视图 和 内 容 视图 的 区 别 


在 滚动 视图 对 象 里 有 几 个 属性 需要 大 家 了 解 : 
- contentSize: 它 描述 了 有 多 大 范围 的 内 容 需 要 使 用 Sctoll View 的 窗口 来 显示 ， 其 默认 值 为 CGSizeZeto， 也 就 是 宽 和 高 都 是 0。 


当 contentSize 小 于 当前 scrollView 的 大 小 时 ， 意 味 着 用 户 要 显示 的 内 容 在 窗口 范围 内 是 可 以 全 部 显示 的 。 这 时 ， 通 常 内 容 视 图 是 拖 不 动 的 《内容 可 以 全 部 显示 ) 。 之 所 以 说 是 “通常 ”， 是 因为 通过 某 


些 设置 ， 还 是 可 以 拖 得 动 的 ， 后 面 的 滚动 视图 回 弹 机 制 里 会 解释 。 所 以 要 让 视图 可 以 抱 动 ， 我 们 得 设置 一 个 contentSize。 


- contentOffset: 描述 了 内 容 视 图 相对 于 Scroll View 窗 口 的 位 置 (相对 于 左上 角 的 偏 移 量 ) 。 上 默认 值 是 CGPointZetro， 也 就 是 (0, 0) 。 当 视图 被 拖 动 时 ， 系 统 会 不 断 修 改 该 值 。 也 可 以 通过 
setContentOffset(_:animated:) 方 法 让 图 片 到 达 某 个 指定 的 位 置 。 


: contentInset: 表示 Scroll View 的 内 边 距 ， 也 就 是 内 容 视图 边缘 和 Sctoll View 的 边缘 的 留 空 距 离 ， 默 认 值 是 UIEdgeInsetsZero， 也 就 是 没 间 距 。 这 个 属性 用 得 不 多 ， 通 常 在 需要 刷新 内 容 时 才 用 得 到 。 


步骤 2 ”从 对 象 库 中 拖 曙 一 个 Image View 到 滚动 视图 ， 在 Size Inspector (快捷 键 “com-mand+option+5”) 中 ,将 Width 和 Height 均 设置 为 80， 然 后 将 其 移动 到 顶部 水 平 居中 的 位 置 ， 如 图 3-3 所 


个 \。 


> 图 Sign InvC Scene 


v 图 view Controller Scene 
v Q View Controller 
DI Top Layout Guide 
四 Bottom Layout Guide 
v [] view 
v [] Scroll View 


E 
QD First Responder 
[E] Exit 


> 图 view Controller Scene 


Image View - Displays a single 
image, or an animation described by 
an array of images. 


图 3-3  4£Scroll View 上 添加 Image View 

加 注意 由 于 没有 设置 Image View 的 自动 布局 约束 ，Xcode 会 提示 缺少 必要 的 约束 。 暂 时 不 用 管 它 ， 在 之 后 的 操作 实践 过 程 中 ， 我 们 会 通过 代码 的 方式 解决 布局 的 问题 。 

步骤 3 ”从 资源 文件 夹 中 拖 咏 pp.jpg 文 件 到 项 目 之 中 ， 在 弹出 的 添加 文件 选项 面板 中 ， 确 定义 选 了 Copy items if needed, Added folders 为 Create folder references, Add to targets 的 Instagram 被 
勾 选 。 

步骤 4 ” 回 到 Main.storyboard 故 事 板 ， 选 中 新 添加 的 Image View， 在 Attributes Inspector 中 将 image 设 置 为 pp.jpg，Image View 立 刻 显示 该 图 像 内 容 。 

步骤 5 ”从 对 象 库 中 拖 蝶 七 个 Text Field 到 视图 中 ， 位 置 和 大 小 如 图 3-4 所 示 。 

步骤 6 ”同时 选中 这 七 个 Text Field ( 按 住 command 键 ， 依 次 单 击 每 个 Text Field 对 象 即 可 ) ， 在 Attributes Inspector 中 将 Clear Button 设 置 为 ls always visible。 这 样 可 以 同时 为 七 个 Text Field 设 置 
同样 的 属性 。 

步骤 7 只 选中 第 一 个 Text Field， 设 置 其 Placeholder 为 用 户 名 。 接 着 选中 第 二 个 ， 将 其 设置 为 密码 。 然 后 依次 设置 为 : 重复 密码 、 电 子 邮 件 、 姓 名 、 简 介 和 网 站 ， 如 图 3-5 所 示 。 

步骤 8 同时 选中 密码 和 重复 密码 两 个 Text Field， 在 Attributes Inspector 中 勾 选 上 Secure Text Entry， 因 为 我 们 要 使 用 这 两 个 Text Field 输 入 密码 。 


步骤 9 ”从 对 象 库 中 拖 电 一 个 Button 到 最 后 一 个 Text Field 下 方 靠 屏幕 左 侧 的 位 置 ， 宽 度 设 置 为 70，Title 设 置 为 注册 。 再 复制 一 个 Button 并 将 其 拖 电 到 屏幕 的 右 人 出 ， 将 Title 修 改 为 取消 。 同 时 选中 这 两 
个 Button， 在 Attributes Inspectorrgi&Text Color 修 改 为 White Color。 最 后 ， 将 注册 按钮 的 Background 设 置 为 橘 黄色 ， 将 取消 按钮 的 Background 设 置 为 亮 灰色 (Light Gray Color) ， 如 图 3-6 所 示 。 


> 图 sign Invc Scene 
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» 国 View Controller Scene 


图 3-4 添加 7 个 Text Field 控 件 


重复 密码 


电子 邮件 


Bue 


电子 邮件 


图 3-6 ”设置 Button 的 属性 


3.2 ”创建 Outlet 和 Action 关 联 


要 想 实 现 用 户 交互 的 功能 ， 必 须 创建 Outlet 和 Action 关 联 。 


步骤 1 将 Xcode 切换 到 助手 编辑 器 模式 ， 确 定编 辑 区 域 中 的 上 方 窗口 选中 的 是 故事 板 中 用 户 注册 的 视图 ， 下 方 窗口 会 自动 打开 SignUpVC.swift 文 件 。 如 果 下 方 窗口 中 打开 的 不 是 相应 文件 的 话 ， 可 以 
在 导航 区 域 中 ， 按 住 option 键 并 单 击 相应 文件 ， 以 手动 方式 将 其 在 下 方 窗口 中 打开 。 


步骤 2 为 注册 视图 中 的 控件 对 象 创建 Outlet 关 联 ， 创 建 好 以 后 ，SignUpVC 类 中 的 Outlet 属 性 应 该 有 如 下 这 些 。 


class SignUpVC: UlViewController { 

Image View， 用 于 显示 用 户头 像 

IBOutlet weak var avalmg: UllmageView! 

> 名、 密码 、 重 复 密码 、 电 子 邮 件 的 OutlLet 关 联 


名 

let weak var usernameTxt: UITextField! 
加 - 

e 

e 
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weak var passworTxt: UITextField! 

weak var repeatPasswordTxt: UITextField! 
weak var emailTxt: UITextField! 

、 简 介 、 网 站 的 Outlet 关 联 
let weak var fullnameTxt: UITextField! 
let weak var bioTxt: UITextField! 

let weak var webTxt: UITextField! 

动 视图 的 OUutlet 关 联 

let weak var scrollView: UIScrollView! 
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如 果 不 方便 对 滚动 视图 (scrollView) 进行 Outlet 关 联 操作 的 话 ， 可 以 在 大 纲 视 图 中 拖 忠 相应 的 界面 元 素 lItem 到 SignUpVC 类 中 ， 效 果 是 完全 一 样 的 。 对 于 复杂 的 用 户 界面 来 说 ， 经 常会 用 到 这 种 方 
法 。 因 为 有 些 时 候 往 往 是 几 个 视图 谋 套 在 一 起 ， 或 者 是 排列 得 很 紧密 ， 不 方便 直接 进行 拖 咏 ， 如 图 3-7 所 示 。 


步骤 3 在 Outlet 属 性 声明 的 下 方 ， 为 SignUPVC 类 再 添加 一 个 属性 scrollViewHeight 变 量 ， 利 用 该 属性 可 以 在 虚拟 键盘 出 现 和 消失 时 ， 改 变 滚动 视图 contentsize 属 性 的 高 度 ， 使 其 向 上 滚动 ， 从 而 提 
供 更 好 的 用 户 体验 。 


QIBOutlet weak var scrollView: UIScrollView! 
// 根据 需要 ， 设 置 滚动 视图 的 高 度 
var scrollViewHeight: CGFloat = 0 


大 家 可 以 想象 ， 当 用 户 单 击 Text Field 以 后 会 从 屏幕 底部 滑 出 虚拟 键盘 ， 而 键盘 的 高 度 正 好 会 遮挡 住 位 于 下 方 的 两 个 按钮 和 最 下 面 的 Text Field， 这 为 我 们 信息 的 输入 和 检视 带 来 了 不 小 的 麻烦 。 因 此 ， 
本 章 在 我 们 一 开始 设计 用 户 界 面 的 时 候 ， 就 添加 了 滚动 视图 。 当 虚拟 键盘 出 现时 ， 可 以 增加 滚动 视图 contentSize 属 性 的 高 度 ， 同 时 将 需要 显示 的 部 分 移动 到 虚拟 键盘 的 顶部 ， 这 样 就 会 给 用 户 带 来 非常 舒服 
的 使 用 体验 。 


步骤 4 在 scrollViewHeight 属 性 的 下 面 再 添加 一 个 属性 变量 keyboard， 利 用 该 变量 获取 虚拟 键盘 在 出 现时 候 的 大 小 。 
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impojft UIKit 
class SignUpVC: UIViewController { 


|& ^ QjBOutlet weak var avaImg: UIImageView! 


® I[BOutlet weak var usernameTxt: UITextField! 
G IBOUtlet weak var passworTxt: UITextField! 
[3] MIBOutlet weak var repeatPasswordTxt: UITextField! 


(C) DIBOutlet weak var emailTxt: UITextField! 


UüIBOutlet weak var fullnameTxt: UITextField! 
& I eIBOutlet weak var bioTxt: UITextField! 

[i IQIBOutlet weak var webTxt: UITextField! 
a 


wIilBUUtlet weak var SCI ] Insert Outlet or Outlet Collection 


| override func viewDidLoad() (1 
| super.viewDidLoad() 


图 3-7 通过 大 纲 视 图 创建 Outlet 关 联 


var scrollViewHeight: CGFloat = 0 
// 获取 虚拟 键盘 的 大 小 
var keyboard: CGRect = CGRect( 


— 


该 属性 是 CGRect 结 构 体 类 型 ， 它 包含 了 矩形 的 位 置 和 大 小 信息 。 如 果 你 按 住 command 键 并 单 击 CGRect 的 话 ， 编 辑 窗口 会 直接 跳 转 到 CGRect 的 声明 文件 ， 从 CGRect 结 构 的 声明 中 可 以 发 现 ， 它 包含 
origin (CGPoint 结 构 ) 和 size (CGSize 结 构 ) 两 个 重要 属性 。 在 iOs 平 台 上 ， 撼 形 用 origin 提 供 的 点 (矩形 的 左上 角 在 父 视图 中 的 位 置 ) ， 再 通过 size 属 性 提供 的 width 和 height 来 确定 它 的 位 置 和 大 小 。 


步骤 5 接 下 来 ， 还 要 为 按钮 创建 Outlet 关 联 ， 在 Outlet 关 联 代码 的 下 面 ， 添 加 如 下 代码 : 


// 为 Button 创 建 Outlet 关 联 
@IBOutlet weak var signUpBtn: UIButton! 


ms U 
QIBOutlet weak var cancelBtn: UlButton! 


熟悉 IOSs 的 朋友 可 能 会 这 样 问 ， 我 们 一 般 通过 按钮 向 代码 类 发 送 消息 ， 因 此 只 要 为 按钮 创建 Action 关 联 就 好 ， 为 什么 这 里 还 要 创建 Outlet 关 联 呢 ? 如 果 我 们 为 按钮 创建 了 自动 布局 约束 的 话 ， 确 实 是 这 
样 的 。 但 是 在 本 书 中 ， 我 们 大 部 分 的 布局 是 通过 代码 实现 的 ， 所 以 需要 相关 界面 对 象 在 类 中 的 Outlet 引 用 。 


步骤 6 最 后 为 两 个 按钮 创建 Action 关 联 ， 方 法 名 称 分 别 为 : signUpBtn_clicked 和 cancelBtn_clicked。 


// 注册 按钮 被 单 击 

QIBAction func signUpBtn clicked( sender: AnyObject) { 

print ("注册 按钮 被 按 下 !") 

} 

// 取消 按钮 被 单 击 

QIBAction func cancelBtn clicked( sender: AnyObject) { 
print ("取消 按钮 被 按 下 !") 

} 


如 果 你 仔细 观察 的 话 ， 会 发 现在 编辑 区 域 左 侧 的 沟 模 位置 ， 每 个 Outlet 和 Action 声 明 的 位 置 都 有 一 个 圆圈 ， 它 可 以 是 空心 的 ， 也 可 以 是 实心 的 ， 如 图 3-8 所 示 。 那 它 代表 什么 意思 呢 ? 


// 注册 按钮 被 点 击 
BIBAction func signUpBtn clicked( sender: AnyObject) 1 
print(" 注 册 按 钮 被 按 下 ! ") 


} 


[f RBOBISCHHBUR IE 

gIBAction func cancelBtn clicked( sender: AnyObject) 1 
print(" 取 消 按钮 被 按 下 ! ") 

} 


图 3-8 Outlet 和 Action 的 状态 
当 你 在 类 文件 中 创建 了 Outlet 或 Action 代 码 ， 但 是 该 属性 或 者 方法 并 没有 与 故事 板 中 的 界面 对 象 建立 关联 的 时 候 ， 圆 圈 就 是 空心 的 ， 否 则 就 是 实心 的 。 


构建 并 运行 项 目 ， 在 单 击 不 同 按钮 的 时 候 ， 调 试 控制 台中 会 输出 不 同 的 文本 信息 。 当 然 ， 光 是 单纯 的 输出 文本 信息 还 是 不 够 的 ， 最 起 码 在 用 户 单 击 取消 按钮 以 后 ，SignUPVC 控 制 器 应 该 被 取消 ， 它 的 
视图 应 该 消失 ， 屏 幕 上 应 该 呈现 之 前 的 登录 视图 。 


33 ”让 注册 视图 消失 
让 当前 视图 消失 ， 实 际 上 就 是 要 销毁 当前 的 视图 控制 器 ， 因 此 需要 使 用 控制 器 类 的 dismiss(animated:completion:) 方 法 。 


在 cancelBtn_clicked(_:) 方 法 的 内 部 ，print 语 句 的 下 面 添加 一 行 代码 : 


// 以 动画 的 方式 去 除 通 过 modally 方 式 添加 进来 的 控制 器 
self.dismiss (animated: true, completion: nil) 


假设 我 们 需要 在 View Controller A 中 呈现 View Controller B， 那 么 A 就 充当 Presenting View Controller (弹出 VC) 的 角色 ， 而 B 就 是 Presented View Controller (被 弹出 VC) 。 当 需要 除去 
Presented View Controller (View Controller B) 的 时 候 ， 则 要 在 Presenting View Controller (View Controller A) 中 执行 dismiss(animated:completion:) 方 法 ， 如 果 是 在 Presented View 
Controller 调 用 dismiss(animated:completion:) 方 法 的 话 ， 同 样 会 通过 Presenting View Controller 的 dismiss(animated:completion:) 方 法 进行 处 理 。 


另外 ， 如 果 我 们 连续 呈现 几 个 view controller， 系 统 则 会 构建 一 个 堆栈 。 如 果 在 控制 器 堆栈 的 某 个 层级 执行 dismiss 方 法 的 话 ， 它 的 即时 子 控制 器 和 其 上 的 所 有 控制 器 均 会 被 去 除 。 但 只 有 在 即时 子 控制 
器 的 视图 会 根据 animated 参 数 进行 动画 ， 其 他 的 控制 器 则 被 直接 去 除 。 


构建 并 运行 项 目 ， 在 登录 视图 中 单 击 注册 按钮 以 后 会 呈现 注册 视图 ， 在 注册 视图 中 单 击 取消 按钮 以 后 ， 注 册 视 图 消失 ，SignUPpVC 控 制 器 被 销毁 。 此 时 ， 屏 幕 会 呈现 登录 视图 。 


本 章 小 结 


当 所 要 显示 的 内 容 大 于 屏幕 尺寸 的 时 候 ， 往 往 会 用 到 滚动 视图 。 本 章 我 们 在 搭建 注册 用 户 界面 的 时 候 使 用 了 滚动 视图 ， 还 有 很 多 视图 都 继承 于 滚动 视图 ， 比 如 表格 视图 (Table View) 、 集 合 视图 
(Collection View) 和 文本 视图 (Text View) 等 。 


第 4 章 “注册 视图 中 编写 与 界面 相关 的 代码 


现在 ， 如 果 我 们 构建 并 运行 项 目的 话 ， 在 用 户 注册 界面 单 击 某 个 Text Field 控 件 时 ，iOs 系 统 会 自动 为 我 们 弹出 虚拟 键盘 ， 如 图 4-1 所 示 。 但 是 ， 出 现 的 虚拟 键盘 却 遮 挡住 了 TextField 控 件 以 及 按钮 ， 这 
是 一 个 致命 的 Bug， 因 为 用 户 根本 无 法 单 击 注册 按钮 来 进行 数据 的 提交 ， 或 者 是 单 击 取消 按钮 回 到 之 前 的 界面 。 


运营 商 全 下 午 10:09 —. 


space 


图 4-1 虚拟 键盘 遮挡 了 TextField 控 件 以 及 按钮 


4.1 ”获取 当前 屏幕 的 尺寸 


在 注册 视图 中 ， 我 们 需要 编写 一 些 代码 来 解决 虚拟 键盘 出 现 以 后 的 视图 滚动 问题 。 但 首先 要 获取 屏幕 的 尺寸 ， 并 且 将 该 尺寸 作为 滚动 视图 的 大 小 。 
步骤 1 在 项 目 导 航 中 打开 SignUpVC.swift 文 件 ， 找 到 viewDidLoad() 方 法 。 


Qus 随 着 类 中 方法 和 属性 的 增加 ， 今 后 找 起 方法 和 属性 可 能 会 越 来 越 费劲 。 可 以 在 编辑 区 域 中 通过 顶部 的 指示 栏 快速 定位 到 类 中 的 方法 ， 如 图 4-2 所 示 。 在 弹出 的 列表 中 ，C 代 表 类 ，P 代 表 必 
性 ，M 则 代表 方法 ，Ptr 代 表 协 议 。 


DE < > Bi instagram ) P Instagram ) > SignUpVC.s | SignUPVC 

re r E » sn Mo AC. [3 avaimg 

* @IBOutlet weak var avalmg: UllmageVie [3] usernameTxt 
[3] passworTxt 


QIBOutlet weak var usernameTxt: UITex ve 
@IBOutlet weak var passworTxt: UIText [3] repeatPasswordxt 
(IBOutlet weak var repeatPasswordTxt; [3] emailTt 


QIBOutlet weak var emailTxt: UITextFi fullnameTid 


QIBOutlet weak var fullnameTxt: UITe [3 biorxt 
(IBOutlet weak var bioTxt: UITextFiel webTxt 
QIBOutlet weak var webTxt: UITextFiel (3) scrollView 


QIBOutlet weak var scrollView: UIScro [3 signupBtn 
| [3 cancelBtn 
GIBOutlet weak var signUpBtn: UIButto @ scroitViewHeight 


@IBOutlet weak var cancelBtn: UIButtg [3 keyboard 


| M viewDidLoad() 
// 根据 需要 ， 设 置 滚动 视图 的 高 度 didReceiveMemoryWarningl) 
var scrollViewHeight: CGFloat = 8 | signUpBtn. clickL:) 
// 获取 虚拟 键盘 的 大 小 L cancelBtn click( :) 


图 4-2 ”通过 编辑 区 域 顶部 的 指示 栏 快速 定位 类 中 的 方法 


步骤 2 ”在 viewDidLoad() 方 法 中 super.viewDidLoad() 代 码 的 下 面 添加 如 下 代码 : 


// 滚动 视图 的 窗口 尺寸 
scrollView.frame = CGRect(x: 0, y: 0, width: self.view.frame.width, height: self.view.frame.height) 


当 应 用 程序 的 控制 器 视图 被 载 入 到 内 存 以 后 会 自动 调用 viewDidLoad() 方 法 ， 视 图 的 载 入 通常 有 两 种 方式 。 一 种 是 载 入 故事 板 中 所 设计 的 用 户 界 面 ， 也 就 是 载 入 Storyboard 文 件 中 相关 的 视图 。 另 外 ， 
对 于 早期 的 jiOS 开 发 来 说 ， 也 可 能 载 入 的 是 xib 文 件 ，xib 文 件 是 故事 板 被 引入 到 Xcode 之 前 所 使 用 的 保存 UI 的 文件 方式 。 第 二 种 是 执行 完 控 制 器 类 中 的 loadView () 方 法 以 后 。 如 果 想 通过 手动 编写 代码 的 方式 
加 载 各 种 Ul 元 素 ， 则 需要 重 写 loadView() 方 法 。 


Qua Je X 4f 38 3X Interface Buildet 创 建 了 控制 器 视图 ， 并且 进 行 了 初始 化 ， 那 么 loadView0 方 法 就 不 会 起 作用 。 


还 有 一 点 需要 大 家 了 解 的 是 ，viewDidLoad() 方 法 在 整 个 控制 器 的 生存 周期 中 只 会 被 调用 一 次 ， 就 是 在 控制 器 视图 载 入 完成 以 后 ， 之 后 就 不 会 再 被 调用 了 。 直 到 控制 器 对 象 被 销毁 ， 再 次 创建 一 个 新 的 
控制 器 对 象 时 ， 才 会 再 次 调用 该 方法 。 如 果 我 们 需要 每 次 在 控制 器 视图 重新 出 现 到 屏幕 的 时 候 执行 一 些 代码 ， 则 需要 重 写 viewWilAppear(_:) 方 法 ， 它 会 在 视图 将 要 呈现 到 屏幕 时 被 调用 ， 比 如 在 导航 控制 器 
中 被 压 入 栈 的 控制 器 重新 呈现 出 来 的 时 候 。 


在 上 面 的 代码 中 ， 我 们 将 滚动 视图 的 位 置 和 大 小 设置 为 控制 器 视图 的 左上 角 并 扩展 到 整个 视图 的 宽 高 大 小 。 这 里 因为 控制 器 视图 的 大 小 就 是 手机 屏幕 的 尺寸 ， 所 以 使 用 self.view.frame.width 语 句 来 确 
定 屏幕 尺寸 。 另 外 ， 我 们 也 可 以 直接 使 用 下 面 的 代码 来 设置 滚动 视图 的 尺寸 : 


scrollView.frame = CGRect(x: 0, y: 0, width: UlScreen.main.bounds.width, height: UIScreen.main.bounds.height) 


UlScreen 类 定义 了 基于 硬件 显示 的 相关 属性 ，iOS 设 置 都 有 一 个 主屏 幕 (main screen) 以 及 可 能 会 有 的 附加 屏幕 (attached screen) 。 如 果 是 tvOSs 的 话 ， 则 它 的 主屏 幕 尺寸 就 是 与 之 相连 的 TV 的 分 
辩 率 。 每 个 屏幕 对 象 都 含有 一 个 bounds 属 性 ， 通 过 该 属性 可 以 得 到 屏幕 的 宽度 值 和 高 度 值 。 


步骤 3 在 scrollView.frame 代 码 行 的 下 面 再 添加 两 行 代码 : 


// 定义 滚动 视图 的 内 容 视图 尺寸 与 窗口 尺寸 一 样 
scrollView.contentSize.height = self.view.frame.height 
scrollViewHeight = self.view.frame.height 


滚动 视图 的 contentsize 属 性 是 CGSize 类 型 ， 这 里 我 们 将 其 高 度 设 置 为 与 屏幕 一 样 的 高 度 。 另 外 ， 我 们 还 定义 了 一 个 scrollViewHeight 属 性 用 于 存储 滚动 视图 的 高 度 值 ， 这 里 也 将 其 设置 为 屏幕 的 高 度 
值 。 就 目前 的 情况 来 看 ， 因 为 contentsize 的 高 度 值 与 滚动 视图 的 高 度 值 一 样 ， 所 以 现在 并 不 会 发 生 垂 直方 向 的 滚动 效果 。 


42 添加 键盘 相关 的 Notification 通 知 


当 我 们 在 注册 视图 中 单 击 最 下 面 的 Text Field， 弹 出 的 虚拟 键盘 完全 遮盖 住 网 站 Text Field 和 下 面 的 两 个 按钮 ， 如 图 4-3 所 示 。 


图 4-3 ”虚拟 键盘 遮盖 住 Text Field 的 情况 


Qi 如 果 模 拟 器 在 单 击 了 Text Field 以 后 并 没有 出 现 虚 拟 键 盘 的 话 ， 就 意味 着 此 时 的 模拟 器 已 经 连接 到 了 真正 的 物理 键盘 ， 需 要 在 模拟 器 中 通过 菜单 Hatdwate>Keyboatd>Connect Hardware Keyboard 
将 其 关闭 ， 或 者 直接 使 用 Shift+Cmd+ 开 快捷 键 将 其 关闭 。 


根据 虚拟 键盘 来 调整 滚动 视图 确实 是 一 件 比较 棘手 的 事情 ， 因 为 我 们 需要 考虑 很 多 现实 问题 。 比 如 不 同类 型 的 键盘 有 不 同 的 高 度 ， 用 户 可 以 随时 改变 设备 的 方向 ， 或 者 是 连接 一 个 监 牙 键盘 或 其 他 输入 
设备 ， 甚 至 可 以 随时 显示 或 隐藏 QuickType 栏 (键盘 按钮 上 方 的 语句 建议 栏 ) 。 面 对 如 此 复杂 的 情况 ， 我 们 力争 使 用 最 简单 的 方式 解决 它 。 


当 键盘 状态 发 生变 化 的 时 候 ， 我 们 可 以 通过 NotificationCenter (本 地 消息 通知 中 心 ) 得 到 虚拟 键盘 的 信息 。 在 iOs 系 统 层面 ， 当 有 一 些 事情 发 生 的 时 候 ， 它 会 不 断 地 上 发送 消息 通知 ， 比 如 键盘 的 出 现 与 
消失 ， 应 用 程序 被 移 到 了 后 台 ， 以 及 项 目 中 自 定义 的 事件 等 。 
我 们 可 以 添加 属于 自己 的 本 地 消息 通知 并 命名 相应 的 方法 ， 当 消息 通知 发 生 的 时 候 就 会 调用 这 个 方法 ， 甚 到 传递 一 些 有 用 的 信息 。 


步骤 1 在 viewDidLoad() 方 法 的 底部 ， 添 加 两 个 NotificationCenter 类 型 的 本 地 消息 通知 。 


// 检测 键盘 出 现 或 消失 的 状态 

NotificationCenter.default.addObserver (self, 
selector: 4 selector (showKeyboard), 
name: Notification.Name.UIKeyboardWillShow, object: nil) 


NotificationCenter.default.addObserver (self, 


selector: #selector (hideKeyboard), 
name: Notification.Name.UIKeyboardWillHide, object: nil) 


Qua 如 果 你 有 Swift 2.2 项 目 开 发 经 验 的 话 ， 可 能 会 使 用 NSNotificationCenter 类 进行 本 地 消息 通知 的 设置 ， 并 且 通 过 UIKeyboardWillShowNotification 常 量 来 监测 键盘 状态 。 但 是 到 了 Swift 3， 直 接 使 用 
NotificationCenter (取消 了 NS 前 级 ) 即 可 ， 并 且 消 息 名 称 必须 使 用 Notification.Name.UIKeyboardWillHide。 


NotificationCenter 的 类 属性 default 用 于 得 到 默认 的 消息 中 心 实例 。 而 addObserver( :selector:name:object:) 方 法 则 用 于 注册 一 个 消息 通知 ， 当 发 生 name 参 数 所 指定 的 事件 时 ， 就 会 调用 selector 参 
数 中 所 指定 的 方法 ，object 参 数 是 在 传递 消息 时 可 携带 的 数据 。 


刚才 所 添加 的 两 行 消息 通知 代码 ， 当 虚拟 键盘 将 要 出 现 (UlKeyboardWillShow) 的 时 候 会 调用 当前 控制 器 类 的 showKeyboard() 方 法 ， 当 虚拟 键盘 将 要 消失 (UlKeyboardWillHide) 的 时 候 会 调用 当 
前 控制 器 类 的 hideKeyboard() 方 法 。 注 意 ， 这 里 的 消息 类 型 中 售 有 Will， 同 时 消息 类 型 中 还 包含 另外 两 个 消息 : 虚拟 键盘 已 经 出 现 (UlKeyboardDidShow) 和 虚拟 键盘 已 经 消失 
(UlKeyboardDidHide) 。Wil 和 Did 这 两 大 类 消息 ， 前 者 是 在 键盘 出 现 和 消失 前 被 发 送 ， 后 者 是 在 键盘 出 现 和 消失 后 被 发 送 。 


此 时 Xcode 的 NotificationCenter 相 关 代码 会 报错 误 ， 这 是 因为 我 们 目前 还 没有 定义 消息 通知 所 调用 的 方法 ， 如 图 4-4 所 示 。 
// 检测 键盘 出 现 或 消失 的 状态 


NotificationCenter.default().addObserver(self, selector: © Use of unresolved identifier 'showKeyboard' 
iiselector(showKeyboard), name: 


NotificationCenter.default().addObserver(self, selector: &selector(hideKeyboard), name: 
NNotification,Name.UIKeyboardWillHide, object: nil) 


Q use of unresolved identifier 'hideKeyboard' 


图 4-4 本 地 消息 通知 报错 


步骤 2 在 SignUpVC 类 中 添加 下 面 的 两 个 方法 : 


// 当 键 盘 出 现 或 消失 时 调用 的 方法 
func showKeyboard (notification: Notification) ( } 
func hideKeyboard (notification: Notification) ( } 


这 两 个 方法 均 带 有 一 个 Notification 类 型 的 参数 ， 该 类 型 封装 了 通过 NotificationCenter 发 送 的 通知 的 消息 ， 那 它 为 什么 会 携带 键盘 的 相关 信息 呢 ? 因为 在 设置 NotificationCenter 的 时 候 ， 它 的 消息 类 
型 为 UIKeyboardWillShow/Hide。 


步骤 3 在 showKeyboard(:) 方 法 中 添加 下 面 的 代码 来 获取 键盘 大 小 : 


// 定义 keyboard 大 小 
let rect = notification.userInfo! [UIKeyboardFrameEndUserInfoKey] as! NSValue 
keyboard = rect.cgRectValue 


如 果 你 对 Swift 语言 的 可 选 (option) 特性 还 不 太 熟 悉 的 话 ， 可 能 会 被 代码 中 出 现 的 问号 (? ) 和 惊叹 号 (!) 弄 得 有 些 不 知 所 措 。Swift 语 法 方面 的 知识 不 在 本 书 的 讲授 范围 之 内 ， 这 里 仅 简 单 做 下 介 
4n 


-Ho 


43 Swift 直言 中 的 可 选 特性 
你 现在 可 以 暂时 关闭 当前 的 iOS 项 目 ， 然 后 在 Xcode 8 的 欢迎 窗口 中 新 建 一 个 Playground 文 件 ， 这 样 方便 本 部 分 代码 的 调试 
Swift 是 非常 安全 的 语言 ， 这 就 意味 着 它 努 力 让 程序 员 在 编写 代码 的 时 候 避 免 出 现任 何 语法 上 的 错误 。 


一 种 导致 代码 运行 错误 的 最 常见 方式 是 试图 访问 一 个 不 存在 的 数据 。 添 加 下 面 的 代码 到 Playground 中 : 


func getStatus() -> String { 
return "Good" 


} 


假设 是 一 个 监测 个 人 状态 的 应 用 ， 其 中 有 一 个 函数 getstatus() 是 返回 个 人 状态 情况 的 。 该 函数 没有 参数 ， 但 它 会 返回 一 个 状态 字符 串 : “Good”。 如 果 今 天 没有 进行 状态 的 测试 ， 它 应 该 返回 什么 
Ue? “Bad” 显 然 不 行 ， 因 为 它 也 代表 一 种 状态 。 空 字符 串 也 许 是 很 常用 的 解决 方案 ， 但 是 如 果 在 其 他 情况 下 ， 需 要 返回 的 是 数字 呢 ?” 不管 是 用 0 还 是 -1， 它 们 都 代表 实数 ， 并 不 能 代表 一 种 无 实际 值 的 情 
况 。 


Swift 为 我 们 提供 了 一 种 解决 方案 : 可 选 。 一 个 可 选 值 说 明 它 可 能 有 值 或 者 可 能 没有 值 。 


上 面 getstatus() 函 数 的 返回 值 是 String， 这 意味 着 : 调用 getStatus0 水 数 以 后 ， 不 管内 部 执行 什么 样 的 代码 ， 总 会 有 一 个 字符 串 类 型 的 返回 值 。 如 果 我 们 想 告诉 Swift， 这 个 函数 可 能 会 返回 一 个 字符 串 
对 象 ， 或 者 返回 一 个 空 值 呢 ? 那 就 需要 使 用 下 面 的 代码 来 替代 之 前 的 代码 : 


func getStatus() -> String? ( 
return "Good" 


} 


请 注意 这 个 问号 ， 它 表示 返回 值 的 类 型 是 可 选 字符 串 。 现 在 ， 我 们 仍然 可 以 在 getstatus() 国 数 中 返回 字符 串 对 象 ， 但 是 也 可 以 返回 一 个 nil 对 象 ， 修 改 之 前 的 函数 为 下 面 这 样 : 


func getStatus (isTest: Bool) -> String? { 
if isTest == true ( 
if score > 80 { return "Good" } 
else if score > 60 ( return "Normal" } 
else { return "Bad" } 
Jelse ( 
return nil 


J 
} 


它 接受 一 个 参数 jsTest 代 表 用 户 是 否 进行 了 测试 ， 如 果 值 为 true 则 会 根据 分 数 返回 相应 的 字符 串 ， 但 是 如 果 值 为 false 则 会 返回 nil， 是 一 个 没有 任何 意义 的 值 。 也 就 是 说 ， 通 过 这 个 函数 我 们 或 者 得 到 一 


个 字符 串 ， 或 者 得 到 一 个 nil。 


一 个 重要 的 事情 是 : Swift 想 让 我 们 的 代码 更 加 安全 ， 如 果 直 接 使 用 这 个 nil 值 也 是 非常 危险 的 ， 因 为 它 可 能 会 让 代码 骨 溃 ， 出 现 逻 辑 问题 ， 或 者 是 让 UlI 显 示 错 误 的 东西 。 因 此 ， 在 声明 一 个 变量 为 可 选 的 
时 候 ，sSwift 要 确保 这 样 处 理 才 够 安全 。 


添加 下 面 的 代码 到 Playground: 


Var Score = 100 
func getStatus (isTest: Bool) -> String? { 
if isTest == true ( 
if score > 80 { return "Good" } 
else if score > 60 { return "Normal" } 
else ( return "Bad" } 
}else ( 
return nil 


} 
var status: String 
status = getStatus (isTest: true) 


国 数 下 面 的 第 一 行 代码 ， 我 们 声明 了 一 个 字符 串 变 量 status， 然 后 在 第 二 行将 getstatus(:) 阔 数 运 行 的 返回 值 赋值 给 status。 此 时 的 代码 是 不 会 运行 的 ， 因 为 status 是 String 类型， 只 有 纯 String 类 型 的 对 
象 才能 赋值 给 它 。 因 此 当前 的 getStatus 是 不 会 返回 String 对 象 的 ， 它 只 能 返回 可 选 String 类 型 。Swift 不 会 让 这 样 的 情况 发 生 ， 从 而 避免 Bug 的 发 生 。 


修复 这 个 问题 ， 我 们 只 需要 让 status 的 类 型 为 String? 即 可 : 


var status: String? 
status = getStatus (isTest: true) 


如 果 在 代码 中 直接 使 用 可 选 变 量 将 是 非常 危险 的 ， 比 如 下 面 这 段 代 码 : 


func printStatus (status: String) 1 
if status == "Good" ( 
print ("你 的 状态 相当 好 !") 


该 函数 通过 传递 进来 的 String 类 型 的 参数 ， 打 印 相 应 的 信息 。 参 数 是 String 类 型 而 不 是 String? ， 因 此 不 能 传递 可 选 类 型 的 变量 ， 这 也 就 意味 着 该 函数 不 能 接受 之 前 定义 的 status 变 量 作为 参数 一 一 因为 


func printStatus (status: String) 1 


if status == "Good" { 
print ("你 的 状态 相当 好 !") 


} 
// 下 面 这 句 报 错 ! 


printStatus (status: status) 


Swift 提供 两 种 解决 方案 : 第 一 种 方案 叫 作 可 选 拆 包 ， 通 过 特定 的 语法 判断 可 选 变量 是 否 有 值 。 它 主要 完成 两 件 事情 : 检查 可 选 变量 status 是 否 有 值 ; 根据 情况 执行 相应 的 语句 代码 。 可 选 拆 包 语法 如 


下 : 
if let unwrappedStatus = status { 
// unwrappedStatus 包含 一 个 String 类 型 的 值 ! 
else { 
// 当 status 的 值 为 hil 的 时 候 ， 需 要 处 理 的 一 些 代 码 http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/16010/0EBPS/Text/... 
} 
这 里 的 if-let 语 句 检 测 并 拆 包 一 个 可 选 变 量 到 一 个 新 的 常量 ( 极 少数 情况 下 是 变量 ) ， 再 根据 实际 情况 执行 相应 的 代码 。 
if let unwrappedStatus = status { 
printStatus (status: unwrappedStatus) 
) else ( 
print ("今天 无 状态 1") 
} 
Swift 提供 的 第 二 种 方案 叫 强制 拆 包 。 如 果 我 们 知道 一 个 可 选 变量 已 经 包含 了 实际 值 ， 就 可 以 直接 使 用 ! 进行 强制 拆 包 。 但 是 需要 注意 的 是 ， 如 果 你 试图 在 一 个 值 为 Nil 的 可 选 变 量 上 强制 拆 包 ， 将 会 发 生 
BB 


删除 之 前 的 if let unwrappedstatus=status{ 开 始 的 所 有 代码 ， 蔡 换 成 如 下 语句 : 


// 因为 确定 status 是 有 实际 值 的 ， 所 以 在 这 里 使 用 ! 对 其 强制 拆 包 


printStatus (status:status!) 


四 注意 ”使 用 这 名 代码 之 前 一 定 要 确保 可 选 变 量 中 是 有 值 的 。 


可 选 的 概念 虽然 非常 好 ， 但 是 真正 使 用 起 来 可 能 会 比较 麻烦 ， 比 如 类 中 的 一 个 属性 A 是 可 选 ， 那 我 们 应 该 如 何 访问 该 属性 的 子 属性 A1 呢 ”如 果 A1 还 是 可 选 呢 ? 以 此 类 推 ， 如 何 访问 A1 的 子 属性 A11 呢 ? 
如 果 它 又 是 可 选 呢 ? 通过 A 访 问 A11 的 话 ， 我 们 需要 经 过 几 层 伐 套 的 if let 语 句 才 可 以 呢 ? 这 大 大 降低 了 代码 的 可 读 性 。 


好 在 Swift 提 供 了 可 选 链 解 决 这 个 问题 。 还 记得 我 们 学 习 可 选 的 初衷 吗 ? 完全 是 因为 那 段 让 人 不 知 所 措 的 两 行 代码 : 


let rect = notification.userInfo! [UIKeyboardFrameEndUserInfoKey] as! NSValue 
keyboard = rect.cgRectValue 


notification 对 象 中 有 一 个 属性 userInfo， 如 果 按 住 command 键 单 击 它 的 话 ， 会 看 到 它 是 可 选 字典 类 型 。 


public var userInfo: [AnyHashable : Any]? 


因此 使 用 userlnfo?[UIKeyboardFrameEndUserlnfoKey] 获 取 字 典 中 键 名 为 UIKeyboard-FrameEndUserlnfoKey 的 值 ， 注 意 ， 因 为 字典 是 可 选 的 ， 所 以 要 在 字典 的 后 面 添加 一 个 ! 


此 时 ， 通 过 字典 所 获取 到 的 值 是 NSRect 类 型 ， 它 是 一 种 值 类 型 (与 Int、Float 类 似 ) ， 所 以 并 不 能 直接 赋值 给 keyboard， 因 为 keyboard 是 CGRect 类 型 ， 是 引用 类 型 。 所 以 ， 我 们 使 用 as! 将 它 强制 转 
换 为 NSValue 类 型 。NSValue 类 型 有 一 个 属性 叫做 cgRectValue， 它 可 以 返回 CGRect 类 型 的 对 象 。 


Qu 在 调试 应 用 程序 的 时 候 ， 可 以 通过 调试 控制 台 利 用 po 命令 查看 程序 代码 中 某 些 对 象 的 信息 ， 帮 助 我 们 确定 这 些 对 象 的 类 型 和 值 。 


试行 


训 运 行 到 断 点 时 便 会 暂停 运行 ， 这 样 我 们 就 可 以 进行 单 步调 试 ， 如 图 4-5 所 示 。 


步骤 1 在 代码 编辑 区 域 左 侧 的 灰色 沟 模 中 单 击 鼠 标 便 可 以 添加 一 个 蓝 色 的 指示 条 


INNO 


func showKeyboard(notification: Notification) { 


//! SX keyboard: 用 户 名 
let rect = ((notification.userInfo?[UIKeyboardFrameEndUserInfoKey]!)!) as! NSValue j 
keyboard = rect.cgRectValue() hread 1: breakpo 家 三 


// 当 虚 拟 键 盘 出 现 以 后 ， 将 省 动 视图 的 实际 高 度 编 小 为 屏幕 高 度 减 去 键盘 的 高 度 。 
UIView.animate(withDuration: 8.4) ( Ea 重复 密码 
self.scrollView.frame.size.height = self.scrollViewHeight 一 self.keyboard.size.height 
电子 邮件 


) 


func hideKeyboard(notification: Notification) 1 
// 当 虚 拟 键盘 消失 后 ， 将 渡 动 视图 的 宰 际 高 度 改变 为 屏幕 的 高 度 值 。 


UIView.animate(withDuration: 0.4) ( 
self.scrollView.frame.size.height = self.view.frame.height 


图 4-5 ”应 用 程序 在 遇 到 断 点 以 后 暂停 运行 
步骤 2 在 调试 控制 台 上 单 击 单 步 调试 按钮 ， 即 图 4-6 中 的 第 三 个 按钮 ， 让 代码 执行 到 keyboard=rect.cgRectValue 这 人 句 代码 的 下 边 。 


步骤 3 在 调试 控制 台中 的 信息 输出 窗口 输入 下 面 这 行 代码 ， 可 以 看 到 相应 的 信息 反馈 ,如 图 4-7 所 示 。 


从 当前 断 点 继续 执行 ， 直到 下 一 个 断 点 
从 当前 断 点 向 下 执行 一 行 代码 
从 当前 记 点 向 下 执行 进入 到 方法 、 函 效 或 线程 中 
从 万 法 、 国 数 或 线程 中 跳 回 到 主体 


> ÉX notification (Notification) 
> EY self = (Instagram.SignUpVC) 0x000071f142327fe50 
fe rect (NSValue) 


图 4-6 ”调试 控制 台中 按钮 的 作用 


(lldb) po rect 
(lldb) po keyboard 


// 当 键 盘 出 现 或 消失 时 调用 的 方法 
func showKeyboard(notification: Notification) ( 
// 定义 keyboard 大 小 


let rect = notification.userInfo![UIKeyboardFrameEndUserInfoKey] as! NSValue 
keyboard = rect.cgRectValue 


b notification (Notification) 
> EY self = (Instagram.SignUpvC) 0x00007fd3b1d0c3bO 
P» 国 rect = (NSValue) 0x0000608000277300 


NSRect: (10, 409), (375, 258)) 


(1ldb) po keyboard 
xr (0.0, 409.0, 375.08, 258.8) 
v Origin : (6,0, 489.0) 


v size : (375.0, 258.0) 
= width : 375.8 
= height : 258.8 


图 4-7 在 调试 控制 人 台中 打印 rect 和 keyboard 值 


po 是 print object 的 缩写 ， 通 过 代码 输出 发 现 ，rect 是 NSRect 类 型 ，keyboard 是 CGRect 类 型 。 


44 ”以 动画 的 方式 改变 浴 动 视图 的 高 度 


当 键 盘 出 现 以 后 ， 让 滚动 视图 的 高 度 值 从 屏幕 的 高 度 变 为 减 去 虚拟 键盘 高 度 后 的 高 度 值 ， 这 样 就 相当 于 滚动 视图 的 窗口 高 度 小 于 滚动 视图 的 内 容 高 度 值 ， 从 而 允许 垂直 滚动 ， 且 我 们 还 以 动画 的 方式 让 
滚动 视图 的 高 度 值 变 化 。 


步骤 1 在 showKeyboard(:) 方 法 的 底部 ， 添 加 下 面 的 代码 : 


func showKeyboard (notification: Notification) { 
// 定义 keyboard 大 小 
let rect = notification.userInfo! 
keyboard = rect.cgRectValue 
// 当 虚 拟 键 盘 出 现 以 后 ， 将 滚动 视图 的 实际 高 度 缩 小 为 屏幕 高 度 减 去 键盘 的 高 度 。 
UIView. animate (withDuration: 0.4) ( 
self.scrollView.frame.size.height = self.scrollViewHeight - self.keyboard.size. 
height 
) 
) 


Ft 


UIKeyboardFrameEndUserInfoKey] as! NSValue 


利用 UIView 的 类 方法 animate(withDuration:animations:) 以 动画 的 方式 ， 在 特定 的 时 间 改 变 视图 的 属性 。 对 于 上 面 的 代码 ， 是 用 0.4 秒 的 时 间 ， 改 变 滚动 视图 的 高 度 值 为 当前 滚动 视图 的 高 度 (也 就 是 
屏幕 的 高 度 ) 减 去 呈现 出 来 的 虚拟 键盘 高 度 。 


步骤 2 接 下 来 完成 hideKeyboard(;) 方 法 : 。 


func hideKeyboard (notification: Notification) { 1 
// 当 唐 拟 键盘 消失 后 ， 将 滚动 视图 的 实际 高 度 改 变 为 屏幕 的 高 度 值 。 

UIView. animate (withDuration: 0.4) ( 
self.scrollView.frame.size.height self.view.frame.height 
} 

} 


当 虚 拟 键盘 消失 的 时 候 ， 经 过 0.4 秒 的 时 间 ， 将 滚动 视图 的 实际 高 度 值 改 变 为 屏幕 的 高 度 值 。 


4.5 ”通过 Tap 手 势 让 虚拟 键盘 消失 


虽然 虚拟 键盘 出 现 和 消失 的 处 理 方 法 已 经 在 控制 器 类 中 编写 完成 ， 但 是 让 虚拟 键盘 消失 的 事件 我 们 还 没有 定义 。 接 下 来 ， 我 们 要 为 控制 器 的 视图 添加 一 个 单 击 手势 。 


步骤 1 在 viewDidLoad() 方 法 的 底部 添加 下 面 的 代码 : 


// 声明 隐藏 虚拟 键盘 的 操作 


let hideTap = UITapGestureRecognizer (target: self, action: #selector (hideKey 
boardTap)) 
hideTap. numberOfTapsRequired = 1 


self.view.isUserInteractionEnabled = true 
self.view.addGestureRecognizer (hideTap) 


在 上 面 代码 的 第 一 行 ， 我 们 创建 了 一 个 单 击 手势 ， 当 手势 发 生 后 会 调用 当前 类 的 hidekeyboardTap(:) 方 法 ; 第 二 行 设置 了 该 手势 的 单 击 次 数 是 1 次 ; 第 三 行 设置 了 当前 控制 器 的 视图 为 可 交互 ， 也 就 是 
能 够 响应 用 户 的 单 击 操作 ， 默 认 控制 器 的 视图 是 不 可 交互 的 ; 最 后 一 行 是 将 该 手势 识别 添加 到 控制 器 的 视图 上 。 


步骤 2 ”为 SignUPVC 类 中 添加 hideKeyboardTap(:) 方 法 : 


// 隐藏 视图 中 的 虚拟 键盘 
func hideKeyboardTap (recognizer: UlTapGestureRecognizer) { 
self.view.endEditing (true) 


) 


UIView 的 endEditing() 方 法 用 于 设置 视图 的 编辑 状态 。 当 视图 中 的 Text Field 处 于 编辑 状态 (虚拟 键盘 呈现 在 屏幕 上 ) 时 ， 执 行 endEditing(true) 可 以 让 虚拟 键盘 消失 ， 也 就 是 让 视图 中 所 有 Text Field 
的 The first responder 处 于 挂 起 状态 。 


构建 并 运行 项 目 ， 在 登录 界面 中 单 击 注册 按钮 ， 然 后 单 击 任意 的 Text Field 后 会 出 现 虚 拟 键盘 ， 并 且 它 盖 住 了 位 于 底部 的 Text Field 和 Button。 在 视图 上 拖 遇 鼠 标 后 ， 可 以 看 到 所 有 的 U 元 素 。 单 击 视图 
后 虚拟 键盘 立即 消失 ， 如 图 4-8 所 示 。 
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本 章 小 结 


本 章 我 们 利用 本 地 消息 通知 获取 虚拟 键盘 出 现 和 消失 时 候 的 事件 ， 并 且 指 定 了 人 在 发 生 键盘 事件 时 的 方法 。 通 过 传递 Notification 对 象 参数 ， 我 们 了 解 了 如 何 获取 虚拟 键盘 的 高 度 值 。 在 获取 键盘 高 度 值 的 
同时 ， 又 简单 了 解 了 可 选 变量 的 相关 知识 。 


第 5 章 ”设置 注册 页 面 的 用 户头 像 


本 章 我 们 要 实现 注册 页 面 的 用 户头 像 设 置 功能 ， 当 用 户 在 注册 页 面 单 击 顶 部 的 Image View 时 ， 会 弹出 照片 选择 器 ， 进 而 设置 用 户 的 头像 。 


5.1 为 Image View 添 加 单 击 手势 识别 


Image View 控 件 在 默认 情况 下 是 不 具备 交互 功能 的 ， 这 与 控制 器 视图 相同 ， 但 我 们 同样 可 以 将 它 的 交互 功能 开通 。 


ZUR 在 项 目 导航 中 打开 SignUPVC.swift 文 件 ， 在 viewDidLoad() 方 法 底部 添加 下 面 的 代码 : 


let imgTap = UITapGestureRecognizer (target: self, action:4selector (loadImg)) 
imgTap.numberOfTapsRequired = 1 

avalmg.isUserlnteractionEnabled = true 

avalmg.addGestureRecognizer (imgTap) 


与 上 一 章 隐 藏 键盘 的 代码 类 似 ， 只 是 这 里 将 手势 识别 对 象 添 加 到 了 Image View 对 象 上 。 


手势 识别 (UlGestureRecognizer) 类 可 以 将 低级 别 的 事件 处 理 代码 转换 成 高 级 别 的 动作 。 它 们 被 绑 定 到 视图 上 ， 这 些 对 象 允许 视图 对 特定 手势 动作 进行 响应 ， 就 像 控件 一 样 。 手 势 识别 对 象 把 触摸 解 
析 成 一 个 确定 的 手势 ， 例 如 划 动 (swip) 、 捍 合 (pinch) 或 者 旋转 。 如 果 它 们 识别 出 了 特定 手势 ， 则 会 发 送 一 条 动作 消息 (UITapGestureRecognizer 初 始 化 方法 的 第 二 个 参数 ) 给 一 个 目标 对 象 
(UITapGestureRecognizer 初 始 化 方法 的 第 一 个 参数 ) 。 目 标 对 象 一 般 来 说 是 视图 的 控制 器 。 这 种 设计 模式 简单 而 又 强大 : 我 们 能 够 动态 地 决定 一 个 视图 要 响应 哪个 动作 ， 并 且 能 够 给 一 个 视图 加 上 手势 


识别 器 而 不 用 创建 视图 的 子 类 。 
在 设计 应 用 程序 的 时 候 ， 需 要 考虑 识别 手势 的 类 型 。 表 5-1 中 列 出 了 系统 预定 义 的 手势 识别 类 型 。 


表 5-1 系统 预定 义 的 手势 识别 类 型 


ERN UIKit 类 
单 击 (任意 单 击 次 数 ) UITapGestureRecognizer 
捏合 〈 用 于 放大 或 缩小 视图 ) UlPinchGestureRecognizer 
Faki k, UIPanGestureRecognizer 
划 动 〈 任 意 方 回 ) UISwipeGestureRecognizer 
HEFE UIRotationGestureRecognizer 
长 按 (也 可 以 理解 为 按 住 ) UlLongPressGestureRecognizer 


应 用 程序 应 该 只 以 用 户 期 望 的 方式 对 手势 进行 识别 。 例 如 ， 一 个 捏合 操作 应 该 只 负责 视图 的 放大 和 缩小 ， 一 个 单 击 操作 应 该 会 选择 某 样 东西 。 


手势 不 是 离散 的 就 是 连续 的 。 一 个 离散 的 手势 ， 例 如 单 击 (tap) ， 只 发 生 一 次 ， 而 且 不 可 以 取消 。 一 个 连续 的 手势 ， 例 如 捏合 (pinching) ， 发 生 在 一 个 时 间 段 内 。 对 于 离散 的 手势 ， 手 势 识 别 器 发 
送 给 它 的 目标 一 个 独立 的 动作 消息 。 而 连续 手势 的 手势 识别 器 会 持续 发 送 给 目标 动作 消息 ， 直 到 触摸 序列 停止。 


5.2 ”创建 照片 获取 器 


一 般 情 况 下 ， 如 果 应 用 中 需要 获取 照片 库 中 的 照片 ， 则 需要 借助 系统 内 置 的 照片 获取 器 。 


步骤 1 在 SignUpVC 类 中 新 建 loadlmg0 方 法 : 


func loadImg (recognizer: UlTapGestureRecognizer) { 
let picker = UIImagePickerController () 

picker.delegate self 
picker.sourceType = .photoLibrary 
picker.allowsEditing = true 
present(picker, animated: true, completion: nil) 


loadlmg() 方 法 携带 一 个 UITapGestureRecognizer 类 型 的 对 象 作 为 参数 ， 该 对 象 封装 了 Tap 事 件 的 相关 信息 。 当 用 户 单 击 Image View 后 会 调用 该 方法 。 


在 loadlmg() 方 法 中 ， 我 们 首先 创建 UIImagepPickerController 类 型 的 对 象 ， 它 是 照片 获取 器 对 象 ， 用 户 可 以 通过 它 从 摄像 头 或 者 相册 中 选择 一 张 照 片 。 当 我 们 第 一 次 创建 UlImagepPickerController 对 
象 时 ，iOS 会 自动 询问 用 户 是 否 允 许 应 用 程序 访问 照片 库 。 


在 方法 中 有 三 个 地 方 需要 说 明 一 下 : 


首先 ， 将 self (当前 的 SignUpVC 类 的 对 象 ， 也 就 是 当前 的 视图 控制 器 对 象 ) 赋值 给 照片 获取 器 的 delegate 属 性 ， 这 需要 SignUpVC 类 必须 符合 UllmagePickerControllerDelegate 协 议 ， 另 外 还 要 让 
SignUPVC 类 符合 UINavigationControllerDelegate 协 议 ， 这 个 协议 是 必须 的 ， 因 为 前 面 的 协议 用 到 了 后 面 的 协议 。 不 添加 后 者 ，Xcode 会 报错 ! 


UllmagepPickerControllerDelegate 协 议 的 用 处 在 于 ， 可 以 说 明 用 户 是 否 选择 了 一 张 照片 或 者 是 否 取消 了 选择 。 而 第 二 个 UINavigationControllerDelegate 在 这 里 并 没有 什么 实际 意义 ， 仅 仅 用 它 来 确 
保 Xcode 不 报错 ， 其 更 深层 的 意义 我 们 就 不 再 细 究 了 。 


其 次 ， 我 们 设置 了 获取 器 的 sourceType 为 .photoLibrary， 也 就 是 告诉 获取 器 从 照片 库 中 获取 照片 。 这 个 枚 举 对 象 一 共 包 含 三 种 情况 : 
. photolibraty: 将 设备 的 照片 库 作 为 获取 源 。 
: camera: 将 设备 内 置 的 摄像 头 作 为 获取 源 ， 如 果 要 确定 使 用 前 置 还 是 后 置 摄像 头 ， 则 需要 通过 camefaDevice 属 性 进行 设置 。 
: savedPhotosAlbum: 将 设备 中 的 相机 胶卷 相册 作为 获取 源 。 

最 后 ， 设 置 获 取 器 的 allowsEditing 属 性 为 true， 它 允许 用 户 可 以 对 选择 的 照片 进行 剪裁 。 


步骤 2 在 SignUpVC 类 的 声明 部 分 ,添加 上 面 的 两 个 协议 : 


class SignUpVC: UIViewController, UllImagePickerControllerDelegate, UINavigation- 
ControllerDelegate { 


此 时 ，picker.delegate=self 所 呈现 的 代码 错误 消失 。 


步骤 3 ”在 SignUpVC 类 中 添加 imagepPickerController( :didFinishPickingMediaWithlnfo:) 协 议 方法 : 


// 关联 选择 好 的 照片 图 像 到 jimage view 
func imagePickerController( picker: UllImagePickerController, didFinishPicking- 
MediaWithInfo info: [String : Any]) { 

avalmg.image = info[UIImagePickerControllerEditedImage] as? UllImage 
self.dismiss(animated: true, completion: nil) 


} 


其 实 ， 当 我 们 在 SignUpVC 类 中 添加 UllmagePickerControllerDelegate 协 议 后 ,项 目 是 不 会 报 任何 错误 的 ， 因 为 协议 中 的 所 有 方法 都 是 可 选 的 。 但 是 ， 如 果 我 们 真 这 样 做 的 


话 ，UllmagePickerController 就 失去 了 真正 的 意义 ， 因 为 需要 通过 上 面 的 协议 方法 获取 用 户 所 选择 的 照片 。 


~ 


在 imagePickerController( :didFinishPickingMediaWithlnfo:) 方 法 中 ， 我 们 需要 做 下 面 几 件 事 情 : 
. 从 参数 传递 进来 的 info 字 典 中 提取 image。 
. 将 提取 出 来 的 image 赋 值 给 avalmg 对 象 。 
关闭 照 亡 获取 器 。 
首先 ， 当 用 户 在 获取 器 中 选择 好 照片 后 ， 会 将 相关 信息 以 字典 (Dictionary 类 型 ) 的 方式 作为 参数 发送 给 我 们 。 接 下 来 ， 就 需要 我 们 通过 各 种 键 名 来 获取 到 这 些 信息 ， 下 面 介绍 几 个 相关 的 键 名 : 
. UlImagePickerControllerEditedImage: 特 指 被 用 户 编辑 后 的 图 像 。 
: UIImagePickerControllerOriginallmage: 特 指 用 户 选择 的 原始 图 像 ， 未 经 过 剪裁 过 的 。 
: UIImagePickerControllerMediaURL: 特 指 文 件 系统 中 影片 的 URL。 


- UIlImagePickerControllerCropRect: 特 指 应 用 到 原始 图 像 上 的 剪裁 的 矩形 。 


- UIlImagePickerControllerMediaType: 特 指 用 户 选择 的 图 像 的 类 型 。 它 包括 kUTTypeImage (图 像 ) 和 kUTTypeMovie (影片 ) 类 型 。 


还 有 一 个 问题 就 是 ， 我 们 并 不 清楚 获取 到 字典 中 的 值 是 否 是 Ullmage 类 型 ， 所 以 不 能 直接 使 用 它 。 我 们 需要 使 用 类 型 转换 的 可 选 方法 as? 来 获取 Ullmage 对 象 。 与 as! 强制 转换 不 同 ，as? 是 可 选 转换 ， 
它 意味 着 转换 后 的 结果 可 能 是 具体 的 对 象 ， 也 可 能 是 nil。 


步骤 4 在 SignUPVC 类 中 添加 下 面 的 协议 方法 : 


// 用 户 取 消 获取 器 操作 时 调用 的 方法 
func imagePickerControllerDidCancel( picker: UIImagePickerController) { 
self.dismiss (animated: true, completion: nil) 


} 


如 果 用 户 在 照片 获取 器 中 单 击 取 消 按钮 ， 那 么 就 关闭 它 。 因 为 照片 获取 器 默认 时 会 占据 整个 屏幕 ， 在 单 击 取消 按钮 以 后 我 们 需要 销毁 它 并 返回 之 前 调用 它 的 SignUpVC 控 制 器 中 。 


构建 并 运行 项 目 ， 在 登录 视图 中 单 击 注册 按钮 ， 然 后 在 注册 视图 中 单 击 Image View， 理 论 上 应 该 弹出 照片 选择 器 视图 ， 因 为 这 时 会 调用 loadlmg() 方 法 。 但 如 果 你 是 在 Xcode 8 Beta 中 运行 的 话 ， 应 用 
程序 会 月 省 并 退出 。 这 是 为 什么 呢 ? 下 面 将 详细 讲解 。 


5.3 ”访问 照片 库 的 前 期 准备 


要 想 成 功 访问 照片 库 ， 在 Xcode 8 (就 目前 的 beta 版 ) 中 我 们 还 需要 在 info.plist 文 件 中 添加 两 条 配置 信息 ， 这 样 才 可 以 防止 调 出 照片 获取 器 时 候 应 用 程序 朋 溃 退出 ， 希 望 苹果 在 Xcode 8 正式 版 的 时 候 


步骤 1 在 项 目 导 航 中 打开 info.plist 文 件 ， 在 编译 区 域 中 选择 最 下 面 一 行 的 配置 信息 ， 如 图 5-1 所 示 。 


Key Type Value 


Y information Property List Dictionary (14 items) 
P» AVOSCIoud.framework Localization native development re... String en 
Y instagram Executable file ^— String S(EXECUTABLE NAME) 
Ei pp.jpg Bundle identifier String S(PRODUCT BUNDLE IDENTIFIER) 


InfoDictionary version String 6.0 
Bundle name String S(PRODUCT NAME) 
Bundle OS Type code String APPL 
Bundle versions string, short String 1.0 
Bundle creator OS Type code String 
Bundle version String 
= SigninVC.swift Application requires iPhone enviro... Boolean 
> SignUpVC.swift Launch screen interface file base... String LaunchScreen 
» ResetPasswordVC.swift Main storyboard file base name String Main 
M Products > Required device capabilities Array (1 item) 
Supported interface orientati... 


» AppDelegate.swift 

- Main.storyboard 

~ Assets.xcassets 

- LaunchScreen.storyboard 


图 5-1 ”在 info.plist 中 添加 新 的 配置 条 目 
步骤 2 ”确保 最 后 一 行 的 配置 信息 为 收缩 状态 ( 头 部 的 灰色 三 角 指向 自己 ) ， 单 击 配置 信息 右 侧 的 圆圈 灰色 加 号 ， 此 时 会 添加 一 行 新 的 配置 信息 。 
Qua 如 果 你 在 扩展 状态 下 单 击 配置 信息 的 灰色 加 号 ， 则 会 在 该 配置 信息 的 内 部 添加 一 行 子 配置 信息 。 


步骤 3 ”在 新 添加 的 配置 信息 行 中 ， 设 置 Key 为 Privacy-Media Library Usage Description，Type 为 String，Value 为 Instagram 需 要 使 用 该 设备 的 媒体 库 。 如 法 炮制 ， 再 添加 一 个 配置 信息 ， 设 置 Key 
为 Privacy-Photo Library Usage Description，Type 为 String，Value 为 Instagram 需 要 使 用 该 设备 的 照片 库 ， 如 图 5-2 所 示 。 


Main storyboard file base name | strin | Main 
b Required device capabilities Arra (1 item) 
= Supported interface orientations Arra (3 items) 


Privacy - Media Library Usage Des... tri Instagram 需要 使 用 该 设备 的 媒体 库 
Privacy - Photo Library Usage Des... Strir Instagram 需要 使 用 该 设备 的 照片 库 


图 5-2 ”在 info.plist 中 添加 两 个 隐私 相关 配置 条 目 


再 次 构建 并 运行 项 目 ， 当 项 目 启动 以 后 会 出 现 访 问 照片 库 的 允许 警告 框 。 再 次 单 击 Image View 则 会 正常 弹出 照片 获取 器 ， 如 图 5-3 所 示 。 


KON X iPhone 6 - iOS 10.0 (14A5261u) 


© iPhone 6- iOS 10.0 (1445261u) 
上 午 4:57 mE 运营 商 令 上 午 4:57 mm: 


Cancel 


Camera Roll 
5 


“Instagram” 想 访问 您 的 照片 
Instagram 需要 使 用 该 设备 的 照片 库 


图 5-3 ”在 模拟 器 中 显示 的 隐私 访问 对 话 框 


全 注意 需要 注意 的 是 ， 当 我 们 在 获取 器 中 编辑 照片 时 (将 照片 拖 粤 拉 大 ) 依然 会 导致 程序 崩 演 。 这 应 该 是 Xcode 8 Beta1 版 本 自身 的 问题 ， 如 果 你 使 用 的 是 最 新 版 本 的 Xcode Beta 版 本 则 没有 任何 问 


接 下 来 ， 让 我 们 直接 选取 照片 ， 如 图 5-4 所 示 。 


从 照片 库 选 择 好 照片 后 ， 回 到 注册 页 面 ， 便 看 到 已 经 添加 到 Image View 中 的 头像 了 ， 如 图 5-5 所 示 。 


Cancel Choose 


图 5-4 在 照片 获取 器 中 选择 头像 


EM F 上 午 5:13 --— 


mz 
us 3 

重复 密码 
电子 邮件 


姓名 
间 介 


网 站 


图 5-5 返回 到 注册 页 面 


如 果 你 还 不 清楚 如 何 将 自己 的 照片 添加 到 模拟 器 中 的 话 ， 在 模拟 器 中 打开 照片 应 用 ， 然 后 直接 将 图 片 拖 忠 到 照片 应 用 中 即 可 。 


54 {image View 的 外 观 设 置 为 圆 形 


在 本 章 的 最 后 ， 我 们 要 改变 头像 视图 的 外 观 ， 使 它 成 为 一 个 圆 形 。 


步骤 在 SignUPVC 类 中 的 viewDidLoad( 方 法 中 ， 添 加 下 面 的 代码 : 


// 改变 avaImg 的 外 观 为 圆 形 
avalmg.layer.cornerRadius = avalmg. 
avalmg.clipsToBounds - true 


frame.width / 2 


通过 image view 的 layer 属 性 ， 可 以 设置 视图 的 矩形 圆 角 值 ， 如 果 将 它 的 矩形 圆 角 值 设置 为 自身 宽度 的 一 半 (avalmg 是 80x80 的 正方 形 ) ， 那 它 就 变 成 了 圆 形 。 第 二 行 代码 是 剪裁 挤 多 余 的 部 分 。 


再 次 构建 并 运行 项 目 ， 效 果 如 图 ?5-6 所 示 ， 给 用 户 的 感受 上 立即 提升 了 一 个 档次 。 


四 照片 全 


本 章 小 结 


本 章 我 们 使 用 了 照片 获取 器 类 (UllmagePickerController) 从 系统 的 照片 库 中 获取 指定 的 照片 ， 除 了 编写 相关 代码 以 外 ， 我 们 还 需要 在 项 目的 info.plist 文 件 中 添加 两 个 关键 的 配置 选项 ， 否 则 在 运行 
的 时 候 会 发 生 朋 溃 。 
第 6 章 “ 提交 用 户 注册 信息 到 LeanCloud 


在 设计 好 用 户 注 册页 面 的 UI 和 本 地 功能 后 ， 本 章 我 们 需要 将 用 户 所 填写 的 信息 提交 到 LeanCloud 平 台 上 。 


6.1 ”检验 用 户 和 输入 的 数据 


在 提交 数据 到 LeanCloud 云 端 之 前 ， 我 们 必须 进行 一 次 本 地 的 数据 检验 ， 防 止 将 不 合法 的 数据 信息 写 入 到 LeanCloud 云 端 。 其 实 ，LeanCloud 服 务 本 身 也 会 采取 一 些 机 制 防止 错误 信息 被 提交 到 自身 。 


步骤 1 当 用 户 单 击 注册 按钮 时 ， 控 制 器 视图 应 该 隐藏 虚拟 键盘 ， 所 以 在 signUpBtn_click(:) 方 法 底部 添加 下 面 的 代码 : 


// 隐藏 Keyboard 
self.view.endEditing (true) 


接 下 来 ， 我 们 需要 判断 该 控制 器 视图 中 所 有 的 Text Field 是 否 被 输入 信息 了 ， 这 是 一 段 比 较 大 的 功能 代码 。 


步骤 2 ”在 隐藏 键盘 的 代码 下 面 添 加 代码 : 


f usernameTxt.text?.isEmpty || passwordIxt.text?.isEmpty || repeatPasswordTxt.text?.isEmpty || emailTxt.text?.isEmpty || fullnameTxt.text?.isEmpty || bioTxt.text?.isEmpty || v 


= 一 H- 


上 面 这 段 放 语句 我 想 大 家 都 明白 它 的 作用 ， 如 果 这 7 个 Text Field 当 中 有 1 个 内 容 为 空 则 执行 if 语 句 中 的 代码 ， 但 此 时 它 无 情 地 报错 了 ， 问 题 出 现在 哪里 呢 ? 


6.2 if 语句 中 对 可 选 链 的 处 理 
通过 初步 分 析 ， 问 题 应 该 是 出 在 可 选 链 上 上面。 单独 拿 出 一 个 Text Field 的 判断 代码 ， 以 usernameTxt 为 例 ， 它 本 身 是 UlTextField 类 型 的 对 象 ， 这 是 再 正常 不 过 的 了 。 但 是 它 有 一 个 可 选 字符 串 属 性 
text， 实 际 就 是 Text Field 中 所 输入 的 文本 内 容 。 我 们 直接 通过 可 选 链 text?.isEmpty 判 断 text 是 否 有 文本 信息 ， 这 就 是 问题 所 在 。 


此 时 text?.isEmpty 的 值 是 可 选 布尔 类 型 ，if 语 句 中 的 所 有 判断 必须 是 非 可 选 的 布尔 ， 所 以 修复 此 问题 的 方法 为 将 text? 改 为 text! 即 可 (保证 text 属 性 是 存在 于 Text Field 中 的 ， 所 以 强制 拆 包 ) 。 这 


样 ，usernameTxt.text!l.isEmpty 就 是 布尔 类 型 了 。 


步骤 ”修改 if 语 句 的 代码 为 : 


f usernameTxt.text!.isEmpty || passwordIxt.text!.isEmpty || repeatPasswordTxt.text!.isEmpty || emailTxt.text!.isEmpty || fullnameTxt.text!.isEmpty || bioTxt.text!.isEmpty || v 


= 一 H- 


通过 在 text 属 性 后 面 添加 ! 让 其 强制 拆 包 ， 现 在 的 usernameTxt.text! 已 经 是 非 可 选 的 String 类 型 ， 因 此 usernameTxt.text!l.isEmpty 就 是 非 可 选 的 布尔 类 型 对 象 。 


6.3 ”使 用 UIAlertController 显 示警 告 信 息 


当 Text Field 中 有 空缺 的 时 候 ， 除 了 在 当前 控制 器 不 能 提交 以 外 ， 还 应 该 弹出 一 个 警告 对 话 框 ， 告 知 用 户 现 在 是 什么 状态 。 


步骤 1 ”在 if 语句 中 添加 下 面 的 代码 : 


if usernameTxt.text!.isEmpty || passwordIxt.text!.isEmpty || repeatPasswordTxt.text!.isEmpty || emailTxt.text!.isEmpty || fullnameTxt.text!.isEmpty || bioTxt.text!.isEmpty || w 
// 弹出 提示 对 话 框 
let alert = UIAlertController (title: "请 注意 "，message: "请 填写 好 所 有 的 字段 "，pre 

ferredStyle: .alert) 
let ok = UIAlertAction(title: "OK", style: .cancel, handler: nil) 
alert.addAction (ok) 
self.present(alert, animated: true, completion: nil) 
return 


} 


这 里 我 们 使 用 了 从 iOS 8 开始 引入 的 UIAlertController 类 ， 它 可 以 显示 一 个 对 话 框 并 带 有 选项 按钮 供用 户 选择 。 


在 创建 UIAlertController 对 象 的 时 候 ，title 是 对 话 框 的 标题 ，message 是 对 话 框 中 显示 的 警告 内 容 ，preferredStyle 是 .alert， 它 是 UIAlertControllerStyle 枚 举 中 的 一 种 情况 ， 该 枚 举 一 共 有 两 种 模式 : 


- alert 一 一 警告 对 话 框 模式 ， 弹 出 一 个 履 盖 住 整个 屏幕 的 消息 框 。 
actionSheet- 一 一 在 呈现 它 的 控制 器 视图 底部 滑 出 一 个 对 话 框 ， 如 图 6-1 所 示 。 


请 注意 
请 填写 好 所 有 的 字段 


OK 


Would you like to change the iPhone language to 
Simplified Chinese? 


Change to Simplified Chinese 


Cancel 


图 6-1  AlertfeActionSheet]£ X, 
这 两 种 模式 类 似 ， 但 是 苹果 推荐 我 们 使 用 .alert 模 式 来 告诉 用 户 情况 即将 发 生变 化 。 而 actionSheet 一 般 是 让 用 户 做 出 一 个 选择 。 


下 面 一 行使 用 UlAlertAction 类 添加 一 个 OK 按钮 到 警告 对 话 框 中 ， 它 的 风格 是 .cancel。 一 共有 三 种 风格 可 供 选 择 : 


- .Default 默认 按钮 风格 。 
: .Cancel 单 击 按 钮 后 对 话 框 消失 。 
- „Destructive 你 的 选择 是 不 可 逆 的 。 


这 三 种 风格 的 样式 依赖 于 iOS。 
接 下 来 ， 我 们 将 UlAlertAction 对 象 添加 到 UlAlertController 控 制 器 中 ， 这 样 对 话 框 就 包含 了 指定 风格 的 按钮 。 


最 后 ， 我 们 调用 了 present 方 法 ， 它 包含 三 个 参数 : 要 呈现 的 控制 器 (警告 对 话 框 ) ， 是 否 使 用 动画 方式 ， 当 呈现 动画 结束 以 后 可 以 执行 代码 的 闭 包 。 在 上 面 的 代码 中 ， 我 们 将 alert 作 为 第 一 个 参数 ， 
将 第 二 个 参数 设置 为 true (使 用 动画 方式 ) ， 第 三 个 参数 设置 为 nil， 意 思 是 出 现 对话 框 后 不 做 任何 操作 。 


步骤 2 ”在 signUpBtn_click 中 继续 添加 判断 代码 : 


// 如 果 两 次 输入 的 密码 不 同 

if passwordTxt.text != repeatPasswordTxt.text { 
let alert = UIAlertController(title: "请 注意 "，message: "两 次 输入 的 密码 不 一 致 "，pre- 

ferredStyle: .alert) 
let ok = UIAlertAction(title: "OK", style: .cancel, handler: nil) 
alert.addAction (ok) 


self.present(alert, animated: true, completion: nil) 
return 


) 


构建 并 运行 项 目 ， 故 意 在 两 次 输入 密码 时 不 一 致 ， 单 击 注册 按钮 后 会 弹出 新 的 和 警告 对 话 框 ， 如 图 6-2 所 示 。 


请 注意 


两 次 输入 的 密码 不 一 到 


图 6-2 ”密码 输入 错误 时 的 警告 对 话 框 


6.44 ”提交 数据 到 LeanCloud 平 台 


在 进行 了 必要 的 数据 校 验 以 后 ， 就 可 以 将 数据 提交 到 LeanCloud 平 台 上 了 。 


步骤 1 在 第 二 个 if 语 句 段 的 下 面 添加 如 下 代码 。 


QIBAction func signUpBtn click( sender: AnyObject) { 
// 之 前 添加 的 代码 

// 发 送 注册 数据 到 服务 器 相关 的 列 

let user = AVUser() 

user.username = usernameTxt.text?.lowercased() 
user.email = emailTxt.text?.lowercased() 
user.password = passwordTxt.text 


在 代码 中 ， 我 们 创建 了 AVUser 类 型 的 对 象 。 用 户 系 统 几 乎 是 每 款 应 用 都 要 加 入 的 功能 ， 最 基本 的 应 该 包含 注册 、 登 录 和 密码 重 置 功 能 。AVUser 类 是 用 来 描述 一 个 用 户 的 特殊 对 象 ， 与 之 相关 的 数据 都 
保存 在 LeanCloud 平 台 Instagram 应 用 的 _User 数 据 表 中 。 


AVUser 类 中 包含 username、email 和 password 三 个 关键 属性 ， 直 接 将 Text Field 中 的 文本 赋值 即 可 ，lowercased 方 法 是 将 字符 串 小 写 。 


这 里 一 共有 7 个 Text Field， 如 果 通 过 user.fullname 继 续 赋值 的 话 ，Xcode 就 会 报错 了 ， 因 为 AVUser 类 中 根本 就 没有 类 似 于 fullIname、bio 和 web 这 样 的 属性 。 所 以 要 通过 下 面 的 方式 将 相关 信息 添加 
到 AVUser 对 象 中 。 


步骤 2 继续 添加 下 面 的 代码 : 


user[" fullname" ] = fullnameTxt.text?.lowercased() 
user["bio"] = bioTxt.text 

user["web"] = webTxt.text?.lowercased() 
user["gender"] = "" 


AVUser 类 定义 了 脚 标 ， 可 以 通过 上 面 的 方式 添加 特定 的 个 人 用 户 信 息 。 这 四 个 脚 标 代表 用 户 的 非 通用 信息 。 
IRT Text Field 的 文字 信息 以 外 ， 还 需要 向 LeanCloud 提 交 头 像 照片 信息 。 


步骤 3 ”继续 添加 下 面 的 代码 : 


// | 服务 器 


let avaData = mageJPEGRepresentation (aval [mg.image!, 0.5) 
let avaFile - id "ava.jpg", data: avaData) 
user["ava"] = avaFile 


UllmageJPEGRepresentation(_:，:) 方 法 可 以 将 指定 的 image 转 换 为 JPEG 格 式 ， 第 二 个 参数 是 JPEG 图 像 的 压缩 质量 ， 范 围 是 0.0~1.0， 其 中 1.0 代 表 最 高 质 


最 高 质 


AVFile 是 LeanCloud SDK 提 供 的 类 ， 利 用 AVFile 可 以 将 多 种 类 型 图像、 音频 、 视 频 、 通 用 文件 等 ) 的 文件 存储 在 LeanCloud 之 中 ， 这 些 文 件 需要 被 单独 封装 成 一 个 AVFile 来 实现 文件 的 上 传 、 下 载 等 
操作 。AVFile 支 持 图 片 、 视 频 、 音 乐 等 常见 的 文件 类 型 ， 以 及 其 他 任何 二 进 制 数据 。 


Qi 不 用 担心 文件 名 的 冲突 问题 ， 因 为 每 个 上 传 的 文件 都 有 唯一 的 ID， 所 以 即使 上 传 多 个 文件 名 相同 的 文件 也 不 会 有 问题 。 另 外 ， 给 文件 添加 扩展 名 也 非常 重要 。LeanCloud 云 端 会 通过 扩展 名 来 
判断 文件 类 型 ， 以 便 正确 处 理 文 件 。 所 以 要 将 一 张 JPG 图 片 存 到 AVFile 中 ， 要 确保 使 用 .jpg 扩 展 名 。 


当 用 户 数据 全 部 准备 好 以 后 ， 就 可 以 在 后 台 进 行 数据 提交 了 。 


步骤 4 ”继续 添加 下 面 的 代码 : 


user.signUpInBackground ( (success:Bool, error:Error?) in 
if success { 
print ("用 户 注 册 成 功 !") 
}else { 
print (error?.localizedDescription) 
} 
} 


上 面 的 代码 使 用 用 户 名 + 密码 的 方式 注册 ， 需 要 注意 : 密码 是 以 明文 方式 通过 HTTPS 加 密 传输 给 云端 ， 云 端 会 以 密 文 存储 密码 ， 并 且 加 密 算法 是 无 法 通过 其 他 方式 获取 的 。 换 言 之 ， 用 户 的 密码 只 可 能 
用 户 本 人 知道 ， 开 发 者 不 论 是 通过 控制 台 还 是 APIl 都 是 无 法 获取 的 。 另 外 需要 强调 的 是 ， 在 客户 端 上 ， 切 勿 再 次 对 密码 加 密 ， 这 会 导致 重 置 密码 等 功能 失效 。 


通过 AVUser 的 signUplnBackground 方 法 ， 我 们 在 后 台 ( 非 主线 程 的 其 他 线程 ) 进行 用 户 个 人 数据 的 提交 。 后 台 提 交 数 据 是 iOS 开 发 中 经 常会 用 到 的 技术 ， 因 为 UI 相关 的 东西 只 能 在 主线 程 中 ， 如 果 把 
后 台数 据 提交 这 样 的 事情 也 放 在 主线 程 中 ， 就 可 能 会 出 现 卡 死 现 象 。 


当 数 据 在 后 台 提 交 以 后 ， 我 们 就 可 以 通过 该 方法 的 闭 包 得 到 反馈 信息 。 该 闭 包 带 有 两 个 参数 : success 是 布尔 类 型 ， 指 明 用 户 数 据 信息 是 否 提 交 成 功 ; 当 提交 失败 的 时 候 ， 可 以 通过 第 二 
取 到 错误 信息 。error?.localizedDescription 是 获取 到 本 地 化 的 错误 信息 描述 。 


个 参数 error 获 


构建 并 运行 项 目 ， 在 注册 页 面 中 正确 填写 注册 用 户 信息 ， 然 后 单 击 注册 按钮 。 如 果 在 调试 控制 台中 看 到 “用 户 注册 成 功 ! ”的 信息 ， 则 代表 用 户 注 册 成 功 ， 如 图 6-3 所 示 ， 否 则 会 看 到 错误 信息 。 
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z m | | 2015-86-28 13:24:45.821992 Instagram[24314:348134] [] 
w- V iPhone 6 - iOS 10.0 (14A5261u) | nw, connection, endpoint, report [1.1.1 115.231.183.168:443 

nil TF 下 午 1:25 i | in_progress socket-flow (satisfied)] reported event 
flow:finish, transport 
2016-86-28 13:24:45.822398 Instagram[24314:348134] [] 
nw connection, endpoint, report [1.1 up.qbox.me:443 in, progress 
resolver (satisfied)] reported event flow:finish, transport 
2015-86-28 13:24:45.822781 Instagram[24314:348134] [] 
nw, connection, endpoint, report [1 up.qgbox.me:443 in progress proxy 
(satisfied)] reported event flow:finish, transport 
2015-86-28 13:24:45.918568 Instagram[24314:348129] [] 
nw endpoint, flow protocol, connected [1.1.1 115.231.183.168:443 
in.progress socket-flow (satisfied)] Output protocol connected 
2015-06-28 13:24:45.911336 Instagram[24314:348129] [] 
nw, endpoint, flow. connected, path, change [1.1.1 115.231.183.168:443 
ready socket-flow (satisfied)] Connected path is satisfied 
2016-86-28 13:24:45.911828 Instagram[24314:348129] [] 
nw. connection, endpoint, report [1.1.1 115.231.183.168:443 ready 
socket-flow (satisfied)] reported event flow:finish, connect 
2815-86-28 13:24:45.912262 Instagram[24314:348129] [] 
nw, connection, endpoint, report [1.1 up.qbox.me:443 ready resolver 
(satisfied)] reported event flow:finish, connect 
2015-06-28 13:24:45.9125677 Instagram[24314:348129] [] 
nw. connection, endpoint, report [1 up.qgbox.me:443 ready proxy 
[satisfied)] reported event flow:finish, connect 
2015-06-28 13:24:46.394987 Instagram[24314:348129] [SecError] 
[leaf AnchorTrusted] 
2015-06- 2B 13:24:46.396147 Instagram[24314:348129] [SecError] 


| liuming 
E, 
LUE. 


oojaa 


lluming_cn®@qq.com 


XS © 16-8 .14:25:17.022578 Instagram[24314:348737] [] 
- nw F adpoint handler, cancel [1 up.qbox.me:443 ready proxy 
iOSJT E TRE 5a e (satisfied)] 
2016-06-28 13:25:17.8022941 Instagram[24314:348737] [] 
= nw, endpoint, handler, cancel [1.1 up.qbox.me:443 ready resolver 
xilt& .中 e (satisfied)] 
 |2815-86-28 13:25:17.823251 Instagram[24314:348737] [] 
nw, endpoint, handler, cancel [1.1.1 115.231.183.168:443 ready socket- 
flow [satisfied)] 
2015-06-28 13:25:17.8023658 Instagram[24314:348737] [] 
. nw, socket, service writes block, invoke sendmsqg(fd 18, 31 bytes): 
socket has been closed 
2015-06-28 13:25:17.8024822 Instagram[24314:348737] [] 
nw, endpoint, flow protocol, disconnected [1.1.1 115.231.183.168:443 
cancelled socket-flow (null)] Output protocol disconnected 
2015-86-28 13:25:17.024363 Instagram[24314:348737] [] 
nw, endpoint, handler, cancel [1.1.2 183.136.139.18:443 initial path 
{null} ] 
2015-06-28 13:25:17.024668 Instagram[24314:348737] [] 
nw. endpoint, handler, cancel [1.1.3 115.231.182. 136:443 initial path 
(nul1)] 
2015-86-28 13:25:17.8025118 Instagram[24314:348737] [] 
nw. endpoint, handler, cancel [1.2 up.qbox.me:443 initial path (null)] 


图 6-3 用户 信息 成 功 提 交 到 LeanCloud 云 端 


65 ”在 LeanCloud 云 闹 查 看 提交 的 信息 


除了 在 iOS 客 户 端 得 到 反馈 结果 以 外 ， 我 们 还 可 以 在 LeanCloud 云 端 查看 提交 的 信息 。 


登录 LeanCloud.cn 并 进入 到 控制 台 。 进 入 Instagram 的 存储 功能 ， 在 左 侧 的 数据 列表 中 选择 _ User， 此 时 _User 的 右 侧 显 示 1， 代 表 该 表 中 已 经 有 1 个 数据 信息 了 ， 如 图 6-4 所 示 。 


实名 认证 通知 ; 按 国家 法 律 法 规 的 要 求 ， 需 要 对 所 有 使 用 了 LeanCloud 云 引擎 网 站 托管 服务 的 用 户 进行 实名 认证 。 从 2016 年 5 月 1 日 起 ， 没 有 完成 实名 认证 的 用 上 
登录 控制 台 完成 这 一 手续 。 (没有 使 用 网 站 托管 服务 的 用 户 请 忽略 ) 


添加 行 刚 除 行 | 添加 列 | 查询 | 判断 | 其 他 v 


~ username STRING * emal STRING * password STRING * bio STRING -| ava PILE 
liuming liuming cnéqq.com | 请 求 内 证 | (hidden) WXER| 1057 28*9 ava, jpg 


图 6-4 ”在 LeanCloud 云 端 查 看 提交 的 信息 


本 章 小 结 


本 章 我 们 在 应 用 程序 中 使 用 UIAlertController 创 建 了 警告 对 话 框 。 警 告 对 话 框 一 共有 两 种 形式 : Alert 和 Actionsheet。 其 中 ，Alert 更 适合 向 用 户 显 示警 告 信息 ， 而 ActionSheet 更 适合 让 用 户 做 出 选 


当 我 们 提交 用 户 注册 信息 到 LeanCloud 云 端的 _User 数 据 表 时 ， 需 要 先进 行 数 据 校 验 ，if 浏 断 语 句 只 能 接受 布尔 型 类 型 的 表达 式 ， 如 果 是 可 选 布 尔 类 型 则 需要 进行 强制 拆 包 。 


REIS 
第 7 章 HPR 
在 实现 了 Instagram 项 目的 用 户 注册 功能 以 后 ， 本 章 我 们 要 实现 用 户 的 登录 问题 ， 现 在 的 LeanCloud 云 端 已 经 有 了 注册 用 户 的 数据 ， 我 们 随时 可 以 在 客户 端 进行 登录 。 当 然 ， 大 家 也 都 应 该 清楚 登录 的 


相关 代码 会 在 SigniInVC 类 中 完成 ， 因 为 该 控制 器 是 处 理 用 户 登 录 的 。 


7.1 利用 UserDefaults 存 储 用 户 信息 


步骤 1 在 SignUpVC 类 中 的 signUpBtn_click0 方 法 里 面 ， 找 到 调用 user 的 signUpln-Background0 方 法 ， 在 该 方法 的 闭 包 中 添加 下 面 的 代码 : 


f success { 

print ("A P ARA 1") 

// 记 住 登录 的 用 户 

UserDefaults.standard.set(user.username, forKey: "username") 
UserDefaults.standard.synchronize|() 

Jelse { 
print (error?.localizedDescription) 


} 


H 


在 闭 包 的 if 语句 中 ， 如 果 用 户 注册 成 功 ， 则 会 借助 UserDefaults 类 记 住 登录 的 用 户 信息 ， 因 为 注册 成 功 后 LeanCloud SDK 就 直接 视 其 为 成 功 登录 。 


如 果 你 之 前 有 过 iOS 开 发 经 验 的 话 ， 你 会 觉得 很 熟悉 ， 没 错 ，UserDefaults 就 是 之 前 的 NSUserDefaults 类 ， 这 又 是 一 个 去 掉 了 NS 前 缀 的 类 。 我 们 可 以 使 用 UserDefaults 类 存储 任何 基本 数据 类 型 ， 比 如 
Bool、Float、Double、Int、String 和 NSURL， 除 此 以 外 ， 还 可 以 存储 复杂 的 数据 类 型 ， 比 如 数组 、 字 上 典 、NSDate 甚 至 是 NSData。 


Qaz 从 Xcode 8 beta 29& AI 48, UserDefaults XÑ T standard() 方法， 而 使 用 standatd 类 属性 替代 。 


当 我 们 将 数据 写 入 UserDefaults 以 后 ， 在 App 运 行 的 时 候 可 以 再 次 将 其 载 入 进来 。 这 使 得 数据 的 存储 操作 非常 简单 ， 但 是 需要 清楚 的 是 : 使 用 UserDefaults 存 储 大量 的 数据 绝对 不 是 一 个 明智 的 选择 ， 
因为 它 会 拖 慢 App 的 载 入 速度 。 如 果 你 想 存 储 的 数据 超过 100Kb， 使 用 UserDefaults 绝 对 是 错误 的 选择 。 

在 新 添加 的 第 一 行 代码 中 ， 通 过 类 属性 standard 获 取 到 UserDefaults 的 实例 ， 然 后 就 可 以 利用 set() 方 法 随心 所 欲 地 设置 各 种 各 样 的 值 了 ， 我 们 只 需要 为 每 一 个 值 设 置 一 个 唯一 的 Key， 便 于 之 后 可 以 访 
问 到 这 个 值 。 
新 添加 的 第 二 行 代 码 使 用 synchronize() 方 法 立即 将 改动 存储 到 本 地 磁盘 上 ， 虽 然 不 调用 synchronize() 方 法 ，iOS 在 未 来 的 某 个 时 刻 也 可 以 自动 同步 这 些 数 据 到 UserDefaults， 但 是 在 有 较 高 需求 的 环境 
使 用 synchronize(0 是 非常 必要 的 。 
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步骤 2 ”在 项 目 导航 中 打开 AppDelegate.swift 文 件 ， 在 AppDelegate 类 的 内 部 添加 login () 方 法 。 


func login() { 
// 获取 UserDefaults 中 存储 的 Key 为 username 的 值 
let username: String? = UserDefaults.standard.string(forKey: "username") 


} 


通过 string(forKey:) 方 法 ， 可 以 获取 到 指定 Key 的 值 ， 因 为 该 值 是 String 类 型 ， 所 以 使 用 的 是 这 个 方法 。 除 了 该 方法 以 外 ， 还 可 以 通过 下 列 方法 获取 到 其 他 类 型 的 值 ， 如 表 7-1 所 示 。 


表 7-1 各 种 UsetDefaults 的 存储 方法 


值 的 类 型 获取 该 类 型 值 的 方法 


[AnyObject]? array(forKey:) 
Bool bool(forKey:) 
Data? data(forKey:) 
Dictionary? dictionary(forKey:) 
Float float(forKey:) 

Int integer(forKey:) 
AnyObject? object(forKey:) 
[String]? stringArray(forKey:) 
String? string(forKey:) 
Double double(forKey:) 
URL? url(forKey:) 


注意 ， 除 了 Bool、Float、Int 和 Double 以 外 ， 其 他 方法 都 返回 的 是 可 选 类 型 ， 所 以 在 判断 基本 类 型 的 时 候 就 不 能 使 用 nil 了 ， 否 则 Xcode 会 报错 ! 另外 ， 如 果 通 过 integer(forKey:) 方 法 获取 到 一 个 不 存 的 
Key 的 值 ， 那 该 值 为 0。 


如 果 用 户 名 人 存在， 就 可 以 从 故事 板 中 载 入 相应 的 控制 器 了 。 


步骤 3 在 let username:String?=UserDefaults.standard.string(forKey:"username") 语 句 的 下 面 添 加 这 段 代码 : 


// 如 果 之 前 成 功 登 录 过 

if username !- nil { 

let storyboard: UlStoryboard = UIStoryboard (name: "Main", bundle: nil) 

let myTabBar = storyboard.instantiateViewController (withIdentifier: "TabBar") as! UITabBarController 
window?.rootViewController = myTabBar 


} 


在 上 面 的 代码 中 ， 如 果 username 不 为 空 ， 则 代表 用 户 之 前 已 经 使 用 该 设备 成 功 登录 过 ， 并 且 还 没有 退出 。 


在 if 语句 中 ， 创 建 了 UlStoryboard 类 型 的 对 象 ， 利 用 它 可 以 载 入 项 目 中 的 故事 板 ，name 参 数 是 故事 板 的 文件 名 ， 这 里 为 Main， 与 项 目 中 的 Main.storyboard 一 致 。bundle 参 数 为 nil， 代 表 使 用 当前 
App 的 bundle。 


之 后 ， 我 们 通过 instantiateViewController(withidentifier:) 方 法 传递 给 它 一 个 故事 板 中 定义 好 的 storyboard ID， 这 样 就 可 以 从 故事 板 中 载 入 该 控制 器 了 。 这 里 ， 我 们 从 Main.storyboard 中 载 入 一 个 
storyboard ID 为 TabBar 的 标签 栏 控制 器 (现在 故事 板 中 还 没有 这 个 控制 器 ) ， 并 且 将 它 作 为 整个 应 用 程序 的 根 视 图 控制 器 (Root View Controller) 。 


步骤 4 打开 Main.storyboard 故 事 板 ， 从 对 象 库 中 拖 忠 一 个 Tab Bar Controller 到 故事 板 中 ， 如 图 7-1 所 示 。 

步骤 5 ”选中 和 Tab Bar Controller 具 有 关联 关系 的 ltem 2 控制 器 ， 按 delete 键 将 其 删除 ， 此 时 Tab Bar Controller 中 只 有 一 个 标签 ， 如 图 7-2 所 示 。 
我 们 将 来 会 为 Tab Bar Controller 添 加 更 多 的 子 控制 器 ， 目 前 只 需要 一 个 ， 而 且 该 控制 器 将 会 负责 Instagram 的 个 人 主页 功能 。 

步骤 6 选中 Tab Bar Controller, frldentity Inspector 中 设置 storyboard ID 为 TabBar。 

这 一 部 分 非常 关键 ， 如 果 忘 记 在 故事 板 中 设置 Tab Bar Controller 的 storyboard 1D，Xcode 照 样 会 编译 通过 ， 但 是 在 运行 时 会 发 生 朋 溃 。 

接 下 来 ， 当 用 户 在 注册 页 面 成 功 注册 以 后 ， 自 动 跳 转 到 Tab Bar Controller 中 的 个 人 主页 控制 器 。 


步骤 7 项 目 导航 中 打开 SignUpVC.swift 文 件 ， 在 UserDefaults 语 句 的 下 面 添加 这 上段 代码 : 


UserDefaults.standard() .synchronize() // 之 前 的 代码 

// 从 AppDelegate 类 中 调用 login 方 法 

let appDelegate: AppDelegate = UIApplication.shared.delegate as! AppDelegate 
appDelegate.login() 
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图 7-1 在 故事 板 中 添加 Tab Bar Controller 


Tab Bar Controller © 


图 7-2 MA-5Tab Bar Conttollet 关 联 的 一 个 控制 器 


其 实 ， 我 们 只 是 想 在 用 户 注 册 成 功 以 后 调用 AppDelegate 类 的 login 方 法 ， 通 过 该 方法 可 以 设置 应 用 程序 的 根 视 图 控制 器 ， 也 就 是 屏幕 上 应 该 显示 哪个 控制 器 视图 。 


我 们 需要 使 用 UIApplication 的 类 属性 shared 获 取 当 前 应 用 程序 对 象 的 引用 ， 再 通过 该 UIApplication 对 象 的 delegate 属 性 ， 就 可 以 得 到 AppDelegate 类 的 实例 ， 这 样 执行 之 前 在 AppDelegate 类 中 定义 
的 login() 方 法 就 顺理成章 了 。 


构建 并 运行 项 目 ， 在 注册 页 面 中 再 次 注册 一 个 全 新 的 用 户 ， 当 注册 成 功 以 后 会 直接 进入 标签 栏 控制 器 。 


7.2 SignInVC 中 的 用 户 登 录 


signlnVC 类 主要 负责 用 户 的 登录 。 


步骤 1 在 项 目 导 航 中 打开 SignlnVC.swift 文 件 ， 在 signlnBtn_click() 方 法 中 添加 下 面 的 代码 : 


QIBAction func signInBtn click( sender: UIButton) { 


print ("登录 按钮 被 单 击 ") 


// 隐藏 键盘 
self.view.endEditing (true) 
if usernameTxt.text!.isEmpty || passwordTxt.text!.isEmpt 


y { 

et alert = UIAlertController(title: "iji €", message: "请 填写 好 所 有 的 字段 "，PreferredStyle: .alert) 
let ok = UIAlertAction(title: "OK", style: .cancel, handler: nil) 

alert.addAction (ok) 

self.present(alert, animated: true, completion: nil) 

return 

} 

} 


在 新 添加 的 代码 中 ， 首 先 让 登录 控制 器 的 视图 退出 编辑 状态 ， 实 际 上 就 是 让 虚拟 键盘 消失 ， 然 后 再 判断 用 户 名 和 密码 是 否 都 输入 了 。 


步骤 2 ”接着 在 if 语句 段 的 下 面 添加 这 段 代 码 : 


// 实现 用 户 登 录 功 能 

AVUser.loglInWithUsername (inBackground: usernameTxt.text!, password: passwordTxt.text!) { (user:AVUser?, error:Error?) in 

if error == nil { 
// 记 住 用 户 
UserDefaults.standard.set(user!.username, forKey: "username") 
UserDefaults.standard.synchronize|() 
// 调用 AppDelegate 类 的 Jogin 方 法 
let appDelegate: AppDelegate = UIApplication.shared.delegate as! AppDelegate 
appDelegate.login() 


这 段 代 码 是 登录 控制 器 中 的 精华 ， 但 是 所 涉及 的 知识 点 在 之 前 已 经 全 部 介绍 过 了 。 通 过 AVUser 的 类 方法 loglnWithUsername(inBackground:password:block:) 传 递 用 户 名 和 密码 ， 当 LeanCloud 云 端 
处 理 完 登 录 后 ， 会 在 闭 包 中 执行 相关 的 代码 。 


该 闭 包 也 带 有 两 个 参数 ， 第 一 个 参数 是 成 功 登录 后 的 AVUser 对 象 ， 第 二 个 参数 是 如 果 登 录 失 败 ， 被 封装 的 错误 信息 。 如 果 成 功 登 录 ， 还 是 先 利 用 UserDefaults 存 储 username， 然 后 再 调用 
AppDelegate 类 的 login() 方 法 。 


步骤 3 在 viewDidLoad() 方 法 中 添加 隐藏 虚拟 键盘 的 手势 识别 代码 : 


let hideTap = UITapGestureRecognizer (target: self, action: #selector (hide- 
Keyboard) ) 
hideTap.numberOfTapsRequired = 1 
self.view.isUserInteractionEnabled = true 
self.view.addGestureRecognizer (hideTap) 


步骤 4 添加 hideKeyboard 方 法 : 


func hideKeyboard (recognizer: UlTapGestureRecognizer) { 
self.view.endEditing (true) 


e 


步骤 5 项 目 导航 中 打开 AppDelegate.swift 文 件 ， 在 application( :didFinishLaunching WithOptions:) 方 法 中 return 语 句 的 上 面 添加 对 login 方 法 的 调用 。 


func application( application: UlApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool { 
AVOSCloud.setApplicationId ("2NL5pkgYfnrMXkbfl7w5rU62-gzGzoHsz", 

clientKey: "6S15rQalyXh90CE0i26b2gaJ") 

// 如 果 想 跟踪 统计 应 用 的 打开 情况 ， 可 以 添加 下 面 一 行 代码 

AVAnalytics .trackAppopenead (launchOptions: launchOptions) 

login() 

return true 


构建 并 运行 项 目 ， 因 为 有 了 之 前 的 用 户 注册 操作 ， 所 以 App 一 启动 就 直接 进入 到 了 Tab Bar Controller, 


本 章 我 们 使 用 UserDefaults 类 进行 登录 后 的 数据 人 存储， 利用 UserDefaults 类 可 以 存储 少量 的 数据 到 应 用 程序 的 本 地 磁盘 空间 。 但 如 果 数 据 量 超过 100K 的 话 ， 则 需要 采用 其 他 方式 。 


[mm] 


另外 ， 通 过 代码 的 方式 将 故事 板 中 的 视图 显示 到 手机 屏幕 上 ， 我 们 需要 在 故事 板 中 指定 视图 的 Storyboard ID， 人 否则 在 运行 的 时 候 会 出 现 骨 省 的 情况 。 


前 面 的 实战 操作 已 经 完美 实现 了 用 户 注册 和 登录 的 相关 功能 。 在 本 章 的 实战 学 习 中 ， 我 们 将 会 完成 Instagram 的 密码 重 置 功能 。 


就 目前 这 个 项 目 来 说 ， 不 管 我 们 重新 构建 并 运行 项 目 多 少 次 ， 都 会 直接 进入 到 Tab Bar Controller 控 制 器 ， 因 为 UserDefaults 类 已 经 记 住 了 username 的 值 。 因 此 ， 要 想 进 入 到 密码 重 置 功能 的 页 面 ， 就 
需要 删除 已 经 安装 到 模拟 器 中 的 Instagram 应 用 。 


删除 App 的 操作 与 真 机 的 操作 相同 ， 只 不 过 真 机 是 通过 手指 操作 ， 模 拟 器 中 是 通过 鼠标 操作 。 


打开 项 目 以 后 ，command+R 构 建 并 运行 项 目 ， 然 后 直接 单 击 Stop 按 钮 停止 在 模拟 器 中 运行 。 此 时 的 模拟 器 屏幕 会 显示 iOS 10 的 Home 页 面 ， 从 中 找到 Instagram 应 用 ， 鼠标 按 住 Instagram 应 用 的 图 
标 ， 直 到 它 不 停 地 左右 抖动 为 止 ， 此 时 Instagram 图 标的 左上 角 也 会 出 现 一 个 小 叉子 ， 单 击 小 叉子 以 后 应 用 在 模拟 器 中 会 被 真正 删除 ， 如 图 8-1 所 示 。 


午 10:10 Ld 


Watch 附加 程序 iCloud Drive Instagram 


"Instagram" IB? 
删除 此 应 用 将 同时 删除 其 数据 。 


Safari 


图 8-1 在 模拟 器 中 删除 安装 好 的 应 用 


在 登录 界面 中 ， 如 果 用 户 单 击 忘记 密码 ?按钮 以 后 会 跳 转 到 密码 重 置 控制 器 ， 所 以 在 故事 板 中 创建 该 过 渡 (Segue). 
步骤 1 在 项 目 导航 中 打开 Main.storyboard 故 事 板 ， 在 大 纲 导 览 视图 中 展开 Sign InVC Scene 中 的 View， 找 到 其 中 的 Forgot Btn, 


2 按 住 Control 键 将 Forgot Btn 拖 电 到 Reset PasswordVC 控 制 器 上 面 ， 然 后 松 开 鼠标 ， 如 图 8-2 所 示 。 


€ > Bi instagram) B Instagram ) [3) Main.storyboard } (3) Main.storyboard (Base) } [E] Sign Inrvc Scene ) (D Sign Inve ) [. ] View ) | B| ForgotBtn < À > 
v 图 sign InvC Scene 
T Q Sign Inve 
IE Top Layout Guide 


四 Bottom Layout Guide 

v [] view 

[F] Username Txt 

| F | Password Txt 
Sign In Btn 
IB. Fa mäe sin w 
| | Sign Up Btn 
$ First Responder ban 
图 Exit 
—> Storyboard Entry Point 
(B) Present Modally segue to "Sign Up... 


» 图 sign UpVC Scene o 


P [E] Reset PasswordVC Scene 
> 图 item 1 Scene 


v 图 Tab Bar Controller Scene 
Y (B) Tab Bar Controller 


Tab Bar 
(First Responder 


Ig Exit 


(©) Relationship "view controllers" to "... 


EjS-2 ”通过 大 纲 视图 创建 Segue 


步骤 3 ”在 弹出 的 Segue 快 捷 菜单 中 选择 Present Modally， 如 图 8-3 所 示 。 


步骤 4 ”在 Reset PasswordVC 视 图 中 添加 一 个 Text Field 和 两 个 Button， 将 Text Field 的 Placeholder 设 置 为 电子 邮件 ， 将 两 个 按钮 的 Title 分 别 设置 为 密码 重 置 和 取消 。 设 置 两 个 按钮 的 Text Color 都 为 
White Color， 设 置 密 码 重 置 按钮 的 背景 色 为 蓝 色 ， 取 消 按钮 的 背景 色 为 Light Gray Color， 如 图 8-4 所 示 。 


接 下 来 是 为 该 视图 中 的 UI 元 素 创 建 Outlet 和 Action 关 联 。 


步骤 5 将 Xcode 切换 到 助手 编辑 器 模式 ， 选 择 大 纲 导 览 视图 中 的 Reset PasswordVC Scene 一 View 一 电子 邮件 并 拖 电 鼠 标 到 ResetPasswordVC 类 中 ， 创 建 Outlet 关 联 ， 如 图 8-5 所 示 ， 将 Name 设 置 为 


emailTxt, 
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show Detail 
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Present As Popover 
Custom 
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图 8-4 ”密码 重 置 页 面 


8g & 2» B instagram ) 四 instagram ) lj Main.storyboard ) I Main stor. oerd (Base) ) 国 Reset Pas. VC Scene ) C) Reset Password VC 
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//| RasetPasswo] b iC. swift 


// Instagram 


// Created by 刘 拘 on 16/6/23. 
// Copyright 9 2p16Ẹ Wis. All rights reserved. 


import UIKit 


class ResetPasswo IC: UIViewController ( 


Tr 


" Insert Qutlet. Action, or Outlet Collection 


Trag i i v 
supar.viewDidLS: 


// Da any additional setup after loading the view. 


override func didReceiveMemoryWarning() 1 
supar.didReceiveMemoryWarning(l) 
// Dispose of any resources that can be recreated. 


图 8-5 通过 大 纲 视 图 创建 Outlet 关 联 
步骤 6 通过 大 纲 导 览 视图 再 为 两 个 Button 分 别 创建 Outlet 关 联 ，Name 分 别 设置 为 resetBtn 和 cancelBtn。 


ZUR] 再 为 两 个 Button 创 建 Action 关 联 ，Name 分 别 设置 为 resetBtn_clicked 和 cancelBtn_clicked。 创 建 好 以 后 的 代码 如 下 : 


class ResetPasswordVC: UIViewController { 
QIBOutlet weak var emailTxt: UITextField! 
QIBOutlet weak var resetBtn: UlButton! 
QIBOutlet weak var cancelBtn: UlButton! 
override func viewDidLoad() { 
super.viewDidLoad() 


[BAction func resetBtn clicked( sender: AnyObject) { 


[BAction func cancelBtn clicked( sender: AnyObject) ( 


—— (Bm —— (m o—— 


8.3 ”完成 重 置 控制 器 代码 


首先 实现 用 户 单 击 取消 按钮 操作 的 代码 。 


步骤 1 在 cancelBtn_clicked( :方法 中 添加 下 面 的 代码 : 


QIBAction func cancelBtn clicked( sender: AnyObject) { 
self.dismiss(animated: true, completion: nil) 


步骤 2 ”在 resetBtn_clicked(_:) 方 法 中 添加 下 面 的 代码 : 


(S 


IBAction func resetBtn clicked( sender: AnyObject) { 

// 隐藏 键盘 

self.view.endEditing (true) 

if emailTxt.text!.isEmpty { 

let alert = UlAlertController(title: "ji €", message: "电子 邮件 不 能 为 空 "，pre- 
ferredStyle: .alert) 
let ok = UIAlertAction(title: "OK", style: .cancel, handler: nil) 
alert.addAction (ok) 
self.present(alert, animated: true, completion: nil) 
return 


上 面 的 代码 首先 取消 视图 的 编辑 状态 ， 然 后 判断 Text Field 是 否 为 空 ， 为 空 的 话 弹 出 警告 对 话 框 ， 并 退出 该 方法 。 


步骤 3 在 resetBtn_clicked(_:) 方 法 中 ， 继 续 添加 下 面 的 代码 到 if 语句 的 后 面 : 


AVUser.requestPasswordResetForEmail(inBackground: emailTxt.text) ( (success: 
Bool, error:Error?) in 
if success { 


t alert = UIAlertController(title: "j$;£ €", message: " 重 置 密码 连接 已 经 发 送 到 您 的 电子 邮件 !"，preferredStyle: .alert) 
let ok = UIAlertAction (title: "OK", style: .default, handler: ( ( ) in 
self.dismiss(animated: true, completion: nil) ]) 


alert.addAction (ok) 
self.present(alert, animated: true, completion: nil) 
jelse { 
pri Ty 
} 
} 


(error?.localizedDescription) 


在 上 面 的 代码 中 通过 AVUser 的 requestPasswordResetForEmail(inBackground:block:) 方 法 向 LeanCloud 云 端 发 送 密码 重 置 请 求 ， 当 云端 处 理 完成 以 后 会 通过 闭 包 反馈 回来 。 该 闭 包 有 两 个 参 
Success 代表 重 置 连接 是 否 成 功 发 送 到 填写 的 电子 邮箱 ，error 封 装 了 错误 信息 。 


wk 
EE 


如 果 重 置 连接 发 送 成 功 ， 则 会 通过 警告 对 话 框 显示 一 条 消息 ， 提 示 用 户 到 邮箱 中 去 修改 密码 。 在 初始 化 UIAlertAction 类 的 时 候 ， 我 们 将 style 设 置 为 Default 风 格 ， 并 且 使 用 了 闭 包 。 意 思 是 当 用 户 单 击 
警告 对 话 框 中 的 OK 按钮 以 后 ， 关 闭 当前 的 ResetPasswordVC 控 制 器 ， 回 到 之 前 的 控制 器 。 


构建 并 运行 项 目 ， 在 密码 重 置 页 面 输入 注册 用 户 时 的 电子 邮箱 地 址 ， 再 单 击 密码 重 置 按钮 ， 如 果 正 确 无 误 就 会 弹出 警告 对 话 框 ， 如 图 8-6 所 示 。 


请 注意 
aaia 电子 邮 
件 ! 


OK 


图 8-6 ”测试 密码 重 置 功能 


此 时 ,我 们 可 以 登录 到 邮箱 ， 查 看 密码 重 置 的 连接 ， 如 图 8-7 所 示 。 


单 击 连接 以 后 就 直接 进入 到 密码 重 置 页 面 ， 如 图 8-8 所 示 。 


lit Instagram 的 密码 妆 

EHA: Instagram «do-not-replygapps.leancloud.cn» 
时 jg: 2016 年 6 月 28 日 (星期 二 ) 晚上 11:13 

iiA: A <liuming_cn@qq.com> 


这 二 是 冉 讯 公司 的 官方 邮件 (分 。 为 了 保护 邮箱 安全 ， 内 容 中 的 图 片 未 被 显示 。 显示 图 片 ”信任 此 党 件 人 的 图 片 


Hi, liuming 


您 请 求 重 设 应 用 Instagram HES. AE 下列 链接 来 重 设 您 的 帐号 密码 【链接 在 48 小 时 内 有 效 ) : 


https:/ /leancloud.cn/dashboard/reset.html?token=2Lo( PckyWfinpAviiBVnLXfNWrOp 


图 8-7 接收 密码 重 置 邮件 


新 密码 


图 8-8 ”在 浏览 器 中 单 击 连接 后 看 到 的 页 面 


本 章 小 结 


本 章 我 们 借助 AVUser 类 的 requestPasswordResetForEmaillinBackground:block:) 方 法 重 置 用 户 的 密码 ， 该 方式 是 通过 向 Email 发 送 地 址 链接 来 修改 用 户 密 码 的 。 


第 9 草 ”调整 注册 和 登录 界面 的 布局 


通过 前 面 的 实战 练习 ， 我 们 已 经 搭建 好 用 户 注册 、 登 录 和 密码 重 置 功能 的 页 面 以 及 实现 了 相关 的 逻辑 代码 。 虽 然 ， 目 前 这 个 项 目 在 模拟 器 中 可 以 运行 ， 但 如 果 你 更 换 另 外 一 种 iD 设备 在 模拟 器 中 运行 的 
话 ， 就 会 发 现 此 时 的 界面 布局 是 人 存在 问题 的 。 


9.1 通过 size Classes 查 看 界面 布局 在 不 同 设备 上 的 效果 


如 果 你 有 过 Xcode 7 开发 经 验 的 话 ， 就 会 清楚 当时 的 Size Classes 特 性 是 通过 九宫 格 来 设置 的 ， 不 同 的 格子 选择 会 包含 不 同 的 设备 。 


Size Classes 在 Xcode 8 中 可 以 说 是 焕然 一 新 。 在 故事 板 中 我 们 只 需 单 击 左 下 角 的 View as: XXX 设备 ， 就 可 以 打开 设备 选择 和 方向 选择 面板 ， 从 中 选取 不 同 尺 寸 的 屏幕 。 这 些 屏 幕 尺寸 包括 : 4 英寸 、 
4.7 英 寸 、5 英 寸 与 5.5 英 十 的 iPhone 以 及 9.7 英 寸 与 12.9 英 寸 的 jPad， 除 此 以 外 还 有 设备 屏幕 的 方向 ， 如 图 9-1 所 示 。 另 外 需要 大 家 注意 的 是 : 在 这 些 设备 中 并 没有 iPad mini 设 备 ， 它 应 该 被 划 归 在 了 9.7 英 十 
的 iPad 设 备 中 。 


用 户 名 
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图 9-1 ”故事 板 中 开启 Size Classes 面 板 


如 果 此 时 ， 我 们 将 size Classes 设 备 选 为 Phone SE 的 话 (项 目 开 始 的 时 候 我 设置 的 默认 设备 是 iPhone 6) ， 就 会 看 到 屏幕 尺寸 变 小 ， 但 是 视图 中 的 UI 元 素 并 没有 相应 的 发 生变 化 ， 因 此 导致 界面 布局 的 
问题 ， 如 图 9-2 所 示 。 


图 9-2 ”选择 不 同 设备 后 视图 大 小 发 生 的 变化 


如 何 处 理 这 个 来 手 的 问题 呢 ? 解决 方案 有 两 种 : 一 是 通过 代码 的 方式 ， 在 各 个 控制 器 的 类 中 编写 布局 代码 设置 每 个 UI 元 素 的 位 置 与 大 小 ; 二 是 通过 自动 布局 约束 ， 在 故事 板 中 完成 对 UI 元 素 的 位 置 与 大 
小 的 约束 设置 。 前 者 的 好 处 在 于 对 故事 板 的 操作 少 ， 在 视图 中 UI 元 素 比较 少 的 情况 下 适用 。 后 者 的 好 处 是 可 以 进行 复杂 的 布局 约束 ， 甚 至 可 以 根据 不 同 设备 不 同方 向 进行 个 性 化 的 布局 约束 一 一 如 果 是 同样 
的 复杂 效果 ， 利 用 代码 实现 的 话 有 可 能 会 有 上 干 行 的 代码 量 。 


这 里 我 们 选择 第 一 种 方式 ， 当 然 ， 随 着 后 面 不 断 深入 实践 ， 也 会 接触 到 自动 布局 。 


9.2 ”对 登录 界面 布局 


步骤 1 在 故事 板 中 向 注册 视图 添加 一 个 Label 控 件 ， 在 Size Inspector 中 将 其 高 度 设置 为 ?0。 在 Attributes Inspector 中 设置 字号 为 25，Text 为 Instagram， 对 齐 方式 为 居中 ， 如 图 9-3 所 示 。 


Instagram 


图 9-3 ”设置 Label 的 属性 


步骤 2 将 Xcode 切换 为 助手 编辑 器 模式 ， 为 这 个 Label 添 加 Outlet 关 联 ，Name 设 置 为 label 即 可 。 


步骤 3 在 项 目 导 航 中 打开 SignlnVC.swift 文 件 ， 在 viewDidLoad() 方 法 中 添加 下 面 的 代码 : 


override func viewDidLoad() { 
super. viewDidLoad 
label.frame = CGRect(x: 10, y: 80, width: self.view.frame.width - 20, height: 50) 
usernameTxt.frame = CGRect(x: 10, y: label.frame.origin.y + 70, width: self.view.frame.width - 20, height: 30) 
passwordTxt.frame = CGRect(x: 10, y: usernameTxt.frame.origin.y + 40, width: self.view.frame.width - 20, height: 30) 


在 该 方法 中 ， 将 UlI 元 素 按照 从 上 至 下 的 顺序 依次 编写 布局 代码 。 第 一 个 是 label， 通 过 CGRect 结 构 ， 将 它 的 位 置 设置 为 离 屏 幕 左上 角 (10, 80) 点 一 一 在 2xRetina 屏 设备 上 是 (20, 160) 像素 。 只 有 
在 iPhone Plus 系列 是 3xRetina 屏 幕 ， 也 就 是 (30，240) 像素 。label 的 宽度 是 屏幕 视图 完 度 减 20 点 ， 因 为 label 离 屏幕 左 侧 边 绿 有 10 点 的 距离 ， 所 以 这 里 要 减 去 20 点 ， 以 保证 label 与 右 侧 边 缘 有 10 点 的 距 


离 。 
以 此 类 推 ，usernameTxt 的 位 置 在 y 方 向 上 是 label 的 原始 y 加 上 70 点 ，label 的 origin.y 是 它 在 y 方 向 上 顶部 的 位 置 ， 通 过 高 度 设置 (label 的 高 度 是 50 点 ) 我 们 可 以 推算 出 label 的 底部 与 usernameTxt 的 顶 
部 有 20 点 的 距离 。passwordTxt 的 设置 类 似 。 


步骤 4 在 passwordTxt.frame 代 码 的 下 方 继续 添加 对 按钮 的 设置 : 


torgotBtn. frame = CGRect(x: 10, y: passwordTxt.frame.origin.y + 30, width: self.view.frame.width - 20, height: 30) 
signInl .frame = CGRect(x: 20, y: ForgotBtn. frame.origin.y + 40, width: self.view.frame.width / 4, height: 30) 
signUpBtn.frame = CGRect(x: self.view.frame.width - signlInBtn.frame.width - 20, y: signInBtn.frame.origin.y, width: signlInBtn.frame.width, height: 30) 


DJ 
( 
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forgotBtn 在 y 方 向 上 紧 贴 着 passwordTxt， 所 以 它 的 y 参 数 是 passwordTxt.frame.origin.y+30。signlnBtn 的 x 是 20 点 ， 而 将 它 的 宽度 设置 为 屏幕 宽度 的 四 分 之 一 。 这 样 的 话 ， 在 任何 屏幕 上 都 会 显示 一 
个 合适 的 按钮 宽度 。signUpBtn 位 于 signInBtn 的 右 侧 ，y 位 置 与 之 前 定义 的 signlnBtn 的 y 相 同 ， 所 以 使 用 signlnBtn.frame.origin.y 表 示 。 宽 度 也 使 用 了 signlnBtn 的 宽度 。 但 是 x 位 置 稍 微 复杂 了 
点 ，signUpBtn 的 x 位 置 是 : 


屏幕 宽度 -20 (按钮 右边 与 屏幕 右边 缘 的 距离 ) -signlnBtn 的 宽度 。 
最 后 减 去 的 signlnBtn 的 宽度 实际 就 是 减 去 按钮 的 宽度 ， 因 为 两 个 按钮 宽度 一 样 ， 并 且 signlnBtn 是 在 之 前 定义 好 的 。 


构建 并 运行 项 目 ， 我 们 可 以 选择 不 同 的 设备 进行 模拟 ， 效 果 如 图 9-4 所 示 。 


6:21 AM 


Instagram 


Instagram 


图 9-4 不 同 设 备 上 的 运行 效果 


9.3 ”对 注册 界面 布局 


步骤 1 与 对 登录 界面 的 布局 方式 一 样 ， 在 项 目 导 航 中 打开 SignUPVC 类 ， 在 view-DidLoad() 方 法 的 最 后 添加 下 面 的 布局 代码 : 


// UI 元 素 布局 
avalmg.frame = CGRect (x: self.view.frame.width / 2 - 40, y: 40, width: 80, height: 80) 


用 户头 像 的 Image View 应 该 位 于 屏幕 水 平 中 间 的 位 置 ， 所 以 这 里 将 x 的 值 设 置 为 View 宽 度 的 一 半 ， 但 是 这 样 还 不 够 ， 因 为 现在 的 中 间 是 与 Image View 的 左边 缘 对 齐 的 ， 所 以 还 要 减 去 Image Views 
度 的 一 半 ， 它 的 宽度 是 80 (参数 width 定义 ) ， 所 以 要 减 去 40。 


构建 并 运行 项 目 ， 在 各 个 设备 中 Image View 的 位 置 是 距离 顶部 40， 水 平 中 间 的 位 置 ， 如 图 9-5 所 示 。 
接 下 来 继续 对 Text Field 进 行 布局 。 


步骤 2 ”接着 添加 下 面 的 代码 : 


let viewWidth = self.view. trame. width 

usernameTxt.frame = CGRect(x: 10, y: avalmg.frame.origin. y + 90, width: viewWidth - 20, height: 30) 
passwordTxt.frame = CGRect (x: 10, y: usernameTxt.frame. origin. y + 40, width: viewWidth - 20, height: 30) 
repeatPasswordTxt.frame = - CGRect (x 10, y: passwordTxt.: Frame.origin.y + 40, width: viewWidth - 20, height: 30) 


因为 在 布局 中 经 常 要 用 到 屏幕 的 宽度 ， 所 以 这 里 创建 了 一 个 常量 viewWidth 来 存储 屏幕 的 宽度 值 。 


步骤 3 ”继续 添加 下 面 的 代码 : 


emailTxt.frame = CGRect(x: 10, y: repeatPasswordTxt.frame.origin.y + 60, width: viewWidth - 20, height: 30) 
fullnameTxt.frame = CGRect(x: 10, y: emailTxt.frame.origin.y + 40, width: viewWidth - 20, height: 30) 
bioTxt.frame = CGRect(x: 10, y: fullnameTxt.frame.origin.y + 40, width: viewWidth - 20, height: 30) 
webTxt.frame = CGRect(x: 10, y: bioTxt.frame.origin.y + 40, width: viewWidth - 20, height: 30) 


在 这 段 代码 中 ， 我 们 一 共 设 置 了 4 个 Text Field 的 位 置 和 大 小 ， 其 中 只 有 emailTxt 的 y 值 是 上 一 个 TextField 的 y 值 加 60， 其 他 都 是 加 40。 因 为 我 们 要 从 emailTxt 开 始 划分 一 个 相对 完整 的 部 分 


步骤 4 ”继续 添加 下 面 的 代码 : 


(x: 20, y: webTxt.frame.origin.y + 50, width: viewWidth / 4, height: 30) 


signUpBtn.frame = CGRec 
(x: viewWidth - viewWidth / 4 - 20, y: signUpBtn.frame.origin.y, width: viewWidth / 4, height: 30) 


cancelBtn.frame = CGRec 


需要 说 明 的 是 ，cancelBtn 的 x 值 等 于 : 屏幕 宽度 -按钮 的 宽度 -20， 其 实 也 可 以 写成 viewWidth/4*3-20， 但 是 这 样 的 可 读 性 会 差 些 


步骤 5 修改 cancelBtn_clicked( :) 访 法 为 下 面 这 样 : 


/ Eo] 按钮 被 单 击 

BAction func cancelBtn click( sender: AnyObject) { 
// 在 单 击 取消 按钮 的 时 候 隐 藏 键盘 

self.view.endEditing (true) 

self.dismiss(animated: true, completion: nil) 


} 


这 样 做 是 为 了 保证 在 用 户 单 击 取消 按钮 以 后 ， 虚 拟 键盘 可 以 马上 消失 。 


构建 并 运行 项 目 ， 注 册页 面 的 UI 元 素 在 任何 设备 上 都 完美 显示 ， 如 图 9-6 所 示 。 


图 9-5 定义 头像 视图 的 位 置 和 大 小 
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图 9-6 注册 页 面 的 UI 布 局 


9.4 ”对 密码 重 置 界 面 布局 


最 后 ， 我 们 还 需要 对 ResetPasswordVC 的 视图 进行 布局 。 


步骤 1 在 项 目 导航 中 打开 ResetPasswordVC.swift 文 件 ， 在 viewDidLoad0 方 法 中 添加 如 下 代码 : 


// UI 元 素 布局 

emailTxt.frame = CGRect(x: 10, y: 120, width: self.view.frame.width, height: 30) 

resetBtn.frame = CGRect(x: 20, y: emailTxt.frame.origin.y + 50, width: self.view.frame.width / 4, height: 30) 

cancelBtn.frame = CGRect(x: self.view.frame.width / 4 * 3 - 20, y: resetBtn.frame.origin.y, width: self.view.frame.width / 4, height: 30) 


步骤 2 在 cancelBtn_click( :) 方 法 中 ， 将 代码 修改 为 如 下 所 示 : 


QIBAction func cancelBtn click( sender: AnyObject) { 
self.view.endEditing (true) 
self.dismiss(animated: true, completion: nil) 


在 viewDidLoad() 方 法 底部 ， 为 控制 器 视图 添加 单 击 的 手势 识别 ， 用 来 隐藏 虚拟 键盘 。 


步骤 3 在 viewDidLoad() 底 部 添加 下 面 的 代码 : 


// 隐藏 虚拟 键盘 的 单 击 手势 

let hideTap = UITapGestureRecognizer (target: self, action: #selector (hideKey- 
board)) 
hideTap.numberOfTapsRequired = 1 
self.view.isUserInteractionEnabled = true 
self.view.addGestureRecognizer (hideTap) 


步骤 4 添加 一 个 新 的 方法 hideKeyboard(_:)。 


func hideKeyboard (recognizer: UlTapGestureRecognizer) { 
self.view.endEditing (true) 


) 


构建 并 运行 项 目 ， 效 果 如 图 9-7 所 示 。 


图 9-7 ”密码 重 置 的 UI 布局 


本 章 小 结 


本 章 我 们 通过 代码 的 方法 确定 注册 、 登 录 和 密码 重 置 页 面 中 所 有 UI 控 件 元 素 的 位 置 和 大 小 。 除 了 确定 固定 值 以 外 ， 我 们 还 利用 屏幕 的 宽度 动态 设置 了 按钮 的 宽度 ， 这 就 使 得 按钮 的 宽度 与 屏幕 的 宽度 成 
正比 ， 屏 幕 越 大 ， 按 钮 就 越 宽 。 另 外 ， 在 确定 位 置 的 时 候 还 要 考虑 到 控件 与 屏幕 右 侧 边缘 的 空间 间隔 。 


第 10 章 ”美化 Instagram 


本 章 我 们 要 美化 目前 所 创建 的 Instagram 项 目 ， 让 它 显得 更 专业 、 更 有 型 。 


10.1 添加 字体 


iOS 系 统 只 提供 基础 的 字体 ， 如 果 想 要 使 用 个 性 化 字体 ， 则 需要 将 其 添加 到 项 目 中 并 进行 相应 的 配置 。 
步骤 1 在 百度 中 搜索 Pacifico 字 体 ， 或 直接 在 浏览 器 中 输入 http://zh.fonts2u.com/pacifico 进 行 下 载 。 将 下 载 的 文件 解压 缩 后 得 到 Pacifico.ttf 字 体 文件 。 


步骤 2 将 Pacifico.ttf 文 件 直 接 拖 蝶 到 项 目 之 中 ， 在 弹出 的 文件 选项 面板 中 确定 勾 选 Copy items if needed 和 Add to targets 的 Instagram， 如 图 10-1 所 示 。 


Choose options for adding these files: 


Destination: @ Copy items if needed 


Added folders: / ` Create groups 
QQ Create folder references 


Finish 


图 10-1 ”将 字体 添加 到 项 目 之 中 
在 添加 字体 到 项 目 之 后 ， 可 以 直接 单 击 该 文件 查看 字体 的 效果 。 


步骤 3 在 项 目 导 航 中 打开 info.plist 文 件 ， 添 加 一 行 新 


的 选项 Key 为 Fonts provided by application，Array 类 型 。 因 为 是 Array 类 型 ， 所 以 会 有 Item 0 的 子 项 目 ， 设 置 它 的 值 为 添加 到 项 目的 字体 文件 名 
称 Pacifico.ttf， 如 图 10-2 所 示 。 


Y Fonts provided by application à — Array (1 item) 


Item 0 OQ Sting ^ Pacifico.ttf 


图 10-2 ”为 info.plist 添 加 字体 相关 条 目 


CURA 在 项 目 导 航 中 打开 SignlnVC.swift 文 件 ， 在 viewDidLoad() 方 法 中 添加 下 面 的 代码 : 


override func viewDidLoad() { 
super.viewDidLoad() 
// label 的 字体 设置 
label.font = UIFont (name: "Pacifico", size: 25) 


构建 并 运行 项 目 ， 效 果 如 图 10-3 所 示 。 
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图 10-3 label4& Jf] Pacific FIR 85 zi 


10.2 设置 各 功能 视图 的 背景 图 


接 下 来 ， 要 为 登录 、 注 册 和 密码 重 置 3 个 功能 视图 设置 背景 图 。 


步骤 1 百度 中 搜索 图 片 ， 内 容 为 : 背景 图 1136640， 在 众多 的 图 片 中 选择 一 张 你 认为 合适 的 图 片 ， 将 其 下 载 到 本 地 磁盘 ， 如 图 10-4 所 示 。 
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图 10-4 ”百度 图 片 中 搜索 一 一 背景 图 1136?640 
因为 是 要 作为 背景 图 ， 可 以 适当 地 调 瞳 这 张 背 景 图 的 明度 。 


步骤 2 在 Photoshop 中 打开 这 张 背 景 图 ， 在 菜单 中 选择 图 像 一 调整 一 色相 /饱和 度 中 将 明度 适当 调 暗 ， 如 图 10-5 所 示 。 将 调整 好 的 背景 图 改名 为 bg.jjpg (扩展 名 根据 图 片 自身 的 格式 ) 。 调 整 前 后 的 图 
像 对 比如 图 10-6 所 示 。 


图 10-5 “在 Photoshop 中 设置 图 片 的 明度 


类 上 面 显 示 背 景 图 片 ， 所 以 需要 设置 它 的 Image 属性 为 Ullmage 类 


E 


我 们 需要 在 这 个 视 
最 底层 。 


图 10-6 ”调整 图 像 前 后 的 效果 
位 于 
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因为 Image view 是 视图 类 ， 


.view.frame.width, height: 
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代码 的 方式 创建 了 一 个 image view 对 象 ， 它 的 大 小 就 是 屏幕 的 尺寸 。 


型 的 对 象 。 最 后 ， 通 过 addSubview() 方 法 将 image view 添 加 到 当前 控制 器 的 视图 之 中 。 


又 3 将 bj.jpg 拖 电 到 项 目 之 中 ， 确 保 勾 选 了 Copy items if needed 和 Add to targets 里 的 Instagram。 


在 UIView 的 layer 中 有 一 个 zPosition 属 性 ， 通 过 它 可 以 设置 视图 元 素 在 父 视图 中 的 层次 位 置 ，-1 代 表 
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图 10-7 和 运行 项 目 后 的 效果 


^|: iPhone SE -iOS 10.0 (14A5261u) 


图 10-8 ”调整 zPosition 后 的 效果 


接 下 来 ， 我 们 还 需要 调整 Instagram 标 题 和 忘记 密码 按钮 的 文字 颜色 ， 将 它 修改 为 白色 ， 这 样 和 背景 图 就 显得 和 谐 了 。 


步骤 6 在 故事 板 中 分 别 将 Instagram Label 和 忘记 密码 的 Button 的 文字 颜色 设置 为 White Color。 将 Instagram Label 中 的 文字 全 部 改 为 大 写 ， 这 样 显得 更 加 美观 ， 如 图 10-9 所 示 。 


继续 调整 另外 两 个 视图 的 背景 。 


步骤 7 在 项 目 导航 中 打开 SignUpVC.swift 文 件 ， 同 样 是 在 viewDidLoad0 方 法 的 底部 添加 如 下 代码 : 


// 设置 背景 图 
let bg = UIImageView (frame: CGRect(x: 0, y: 0, width: self.view.frame.width, height: self.view.frame.height)) 


bg.image = Ullmage (named: "bg.jpg") 
bg.layer.zPosition = -1 
self.view.addSubview (bg) 


可 以 直接 复制 之 前 的 背景 图 设置 代码 。 
步骤 8 ”以 此 类 推 ， 使 用 同样 的 方法 在 ResetPasswordVC 的 viewDidLoad() 方 法 中 添加 同样 的 代码 ， 两 个 视图 的 最 终 效果 如 图 10-10 所 示 。 


© © © iPhone SE - iOS 10.0 (14A5261u) 


图 10-9 ”调整 Label 的 外 观 属性 
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在 本 章 的 最 后 ， 向 大 家 介绍 下 LeanCloud 云 端的 邮箱 校 验 功能 。 


打开 LeanCloud 的 控制 台 ， 在 Instagram 应 用 的 应 用 选项 中 可 以 看 到 用 户 账号 的 相关 设置 ， 如 图 10-11 所 示 。 


L 人 instagamn Qp Ozz (Que 


基本 信息 APKS 

应 用 Key [] 用 户 注册 时 ， 发 送 验证 邮件 

安全 中 心 O 用 户 注册 时 ， 向 注册 手机 号 码 发 送 验证 短信 

应 用 选项 (] 重 置 密码 时 ， 必 须 提 供 旧 密码 

邮件 模板 密码 修改 后 ， 强 制 客户 端 重新 登录 

协作 者 O 未 验证 邮箱 的 用 户 ， 禁 止 登录 

数据 导出 [ ] 未 验证 手机 号 码 的 用 户 ， 禁 止 登录 
| 未 验证 手机 号 码 的 用 户 ， 人 允许 以 短信 重 罩 
O 已 验证 手机 号 码 的 用 户 ， 人 允许 以 短信 验证 码 登 录 
第 三 方 登录 时 ， 验 证 用 户 AccessToken 合法 性 


图 10-11 Instagram 应 用 中 的 应 用 选项 
如 果 有 需要 ， 我 们 可 以 选择 用 户 注 册 时 ， 发 送 验证 邮件 。 这 样 的 话 ，LeanCloud 可 以 帮助 你 方便 地 完成 邮箱 校 验 功能 。 


打开 邮件 模板 来 自 定义 验证 邮件 的 内 容 ， 如 图 10-12 所 示 ， 我 们 可 以 根据 实际 情况 进行 修改 。 


用 于 邮箱 验证 的 邮件 主题 用 于 重重 密码 的 邮件 主题 


| 验证 fappnamej} 的 帐号 邮箱 | “| 重 设 ((eppname]) 的 密友 


内 容 内 容 


«p»Hi, ((username))«/p» «p»Hi, ((username))«/p» 

<p> 您 需要 验证 应 用 {{appname}} 里 的 帐号 邮箱 地 址 {{femaiL}+}+， 请 点 击 下 列 链接 进 <p> 

行 确认 : </p> 您 请 求 重 设 应 用 ((appname)) 的 密码 。 点 击 下 列 链接 来 重 设 您 的 帐号 密码 (链接 在 48 
小 时 内 有 效 ) : 

<p><a hrefz"[(link))" style="display: inline-block; padding: 10px 2 </p> 

6px; border-radius: 4px; background-color: #3090e4; color: #fff; te <p> 


| xt-decoration: none; "> 验证 邮箱 </a></p> P «a hrefz"((link))" targetz" blank">{{link}}</a> 
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图 10-12 ”Instagram 应 用 中 的 模板 设置 


本 章 小 结 


本 章 我 们 通过 编写 代码 的 方式 为 登录 页 面 的 Label 控 件 设置 了 字体 和 字号 ， 借 助 百度 从 互联 网 中 下 载 了 适合 的 图 片 作为 Instagram 应 用 程序 页 面 视图 的 背景 。 注 意 ， 在 设置 背景 图 的 时 候 适 当 调 上 暗 图 片 的 
亮度 ， 便 于 突出 文字 效果 。 
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- 第 11 章 ”创建 Home Page 用 户 界 面 


` 第 12 章 ”从 云端 读 取 当前 用 户 信息 


. 第 13 章 ”在 个 人 主页 中 显示 帖子 信息 
- 第 14 章 ”获取 用 户 的 帖子 及 关注 数 
. 第 15 章 ”与 统计 数据 之 间 的 交互 

第 16 章 ”从 云端 载 入 关注 人 员 信 息 
* 第 17 章 ”创建 访客 的 相关 功能 


.第 18 章 设置 访客 页 面 的 布局 


第 11 草 创建 Home Page 用 户 界 面 


当 用 户 成 功 登 录 以 后 ， 就 会 进入 到 Tab Bar Controller 控 制 器 。 目 前 ， 在 该 控制 器 中 只 有 一 个 UlIViewController 类 型 的 控制 器 ， 并 且 还 没有 搭建 用 户 界面 。 最 终 ， 我们 要 制作 一 个 类 似 如 图 11-1 所 示 的 
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图 11-1 利用 集合 视图 控制 器 呈现 用 户 个 人 信息 


mE 在 项 目 导 航 中 打开 故事 板 ， 删 除 与 Tab Bar Controller 关 联 的 唯一 一 个 View Controller， 然 后 从 对 象 库 中 拖 折 一 个 Collection View Controller (集合 视图 控制 器 ) 到 Tab Bar Controller 的 右 
侧 ， 如 图 11-2 所 示 。 


相信 大 家 对 表格 视图 都 非常 了 解 ， 邮 件 、 通 讯 录 和 设置 应 用 都 使 用 了 表格 视图 (Table View) 。 但 表格 视图 中 的 每 一 行 只 能 显示 一 个 单元 格 (Cell) ， 因 此 会 有 一 定 的 局 限 性 。 在 iOs 的 照片 应 用 中 ， 每 
一 行 都 会 显示 多 张 照片 ， 这 就 用 到 了 集合 视图 (Collection View) ， 但 它 绝 不 仅 限于 显示 类 似 表格 或 网 格 的 布局 ， 它 具有 高 度 的 可 定制 特性 。 可 以 使 用 Circle、Cover-Flow、Pulse news 等 布局 ， 甚 至 是 
任何 你 能 想到 的 布局 。 


A Collection View Controller - A 
. | controller that manages a collection 
^ view. 


Tab Bar Controller - A controller 
that manages a set of view controllers 
that represent tab bar items. 


Split View Controller - A 
composite view controller that 
manages left and right view controll... 


à Page View Controller - Presents a 
| sequence of view controllers as 


b Bar Controller Wem pages. 


GLKit View Controller - A 
controller that manages a GLKit view. 


—» AWKit Player View Controller - A 
| view controller that manages a 
AVPlayer object. 


Object - Provides a template for 
objects and controllers not directly 
available in Interface Builder. 


Label - A variably sized amount of 


图 11-2 MIF 2È% X, Collection View Controller 到 故事 板 


通过 观察 图 11-1 的 集合 视图 ， 在 照片 集合 列表 的 上 方 显 示 着 用 户 名 、 个 人 头像 和 相关 数据 等 信息 ， 这 部 分 并 不 属于 集合 视图 的 单元 格 (Collection Cell) 范畴 ， 而 是 集合 视图 的 每 个 Section 的 头 部 分 
(Header) 。 


步骤 2 在 大 纲 视 图 中 选择 Collection View Controller 中 的 集合 视图 标签 ， 在 Attributes Inspector 中 勾 选 Section Header， 如 图 11-3 所 示 。 接 着 ， 将 Header 的 高 度 调整 为 240。 
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图 11-3 ”在 集合 视图 中 创建 Header 部 分 


步骤 3 ”在 Header 部 分 ， 从 对 象 库 中 拖 岛 一 个 Image View。 在 Size Inspector 中 设置 X 和 Y 为 20，Width 和 Height 为 80， 如 图 11-4 所 示 。 在 Attributes Inspector 中 将 Image 设 置 为 pp.jpg。 
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图 11-4 在 Headet 中 添加 Image View 
步骤 4 将 一 个 Labe|l 拖 遇 到 Image View 的 下 面 ， 设 置 其 长 度 到 合适 的 尺寸 ， 为 了 便于 区 分 ， 将 Label 的 内 容 设 置 为 用 户 名 称 ， 如 图 11-5 所 示 。 


步骤 5 将 一 个 Text View 拖 钨 到 Label 的 下 面 ， 设 置 其 长 宽 到 合适 的 尺寸 ， 填 写 内 容 为 你 自己 的 主页 地 址 ， 我 们 将 利用 Text View 显 示 个 人 主页 链接 地 址 ， 如 图 11-6 所 示 。 


图 11-5 在 Headet 中 添加 Label 
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图 11-6 ”在 Headet 中 添加 Text View 
Qi 使 用 Label 同 样 可 以 显示 个 人 主页 地 址 链接 ， 但 是 在 Text View 中 ， 可 以 对 网 址 链接 进行 格式 识别 。 
步骤 6 复制 用 户 名 称 的 Label 到 Text View 的 下 面 ， 拖 映 其 长 宽 到 合适 的 位 置 ， 在 Attributes Inspector 中 将 Lines 设 置 为 0， 如 图 11-7 所 示 。 
将 Label 的 Lines 属 性 设置 为 0%， 人 允许 Label 可 以 显示 任意 行 数 的 文字 内 容 。 如 果 设 置 为 大 于 0 的 数 ， 则 只 能 显示 指定 的 行 数 。 


步骤 7 ”添加 3 个 Label 到 Image View 的 右 侧 ,文字 居中 ， 宽 度 和 位 置 如 图 11-8 所 示 。 
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图 11-7 ”在 Headet 中 添加 另 一 个 Label 
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图 11-8 在 Headet 中 添加 3 个 Label 
步骤 8 再 添加 3 个 Label 到 刚才 3 个 Label 的 下 面 ， 文 字 居中 ， 字 号 12。 分 别 设置 内 容 为 : 帖子 、 关 注 者 、 关 注 ， 如 图 11-9 所 示 。 
在 步骤 7、8 中 所 添加 的 6 个 Label 用 于 显示 当前 用 户 一 共 发 了 多 少 张 照片 (帖子 ) ， 有 多 少 位 关注 我 的 人 (5322) 和 有 多 少 位 我 关注 的 人 (关注) 。 


步骤 9 添加 1 个 Button 到 Label 的 下 面 ,调整 好 大 小 和 位 置 以 后 ， 在 Size Inspector 中 将 Height 设 置 为 25， 在 Attributes Inspector 中 将 Text Color 和 Shadow Color 设 置 为 Black Color， 字 号 
13, Background Color 设 置 为 Group Table View Background Color，Title 设 置 为 编辑 个 人 主页 ， 如 图 11-10 所 示 。 
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Qaz 如 果 在 设置 用 户 界 面 的 时 候 发 现 Text View 与 上 面 Label 发 生 相 互 遮 盖 的 情况 ， 则 可 以 将 Text View 的 背景 色 设 置 为 空 (Clear Color) 。 


11.2 ”为 集合 视图 创建 代码 类 


在 搭建 好 集合 视图 中 Header 部 分 的 用 户 界 面 以 后 ， 接 下 来 我 们 要 在 项 目 中 添加 相应 的 代码 类 文件 。 


步骤 1 在 Instagram 组 (黄色 文件 夹 ) 中 添加 新 的 文件 ， 从 新 文件 模板 中 选择 iOS 一 Source 一 Cocoa Touch Class, Subclass of 设置 为 UICollectionViewController，Class 设 置 为 
HomeVC，Language 确 保 为 Swift。 


步骤 2 重复 步 又 1 的 操作 添加 一 个 新 的 类 文件 ，Subclass of 设置 为 UICollection-ReusableView ，Class 设 置 为 HeaderView，Language 确 保 为 Swift。 
现在 ， 已 经 为 项 目 添加 了 两 个 新 的 类 文件 ， 第 一 个 类 文件 与 故事 板 中 的 集合 控制 器 相关 联 ， 第 二 个 类 文件 则 与 集合 视图 中 的 Header 视 图 相关 联 。 


UlCollectionReusableView 类 为 集合 视图 提供 了 补充 视图 (Header View 或 Footer View) 的 行为 定义 。 从 它 的 命名 我 们 可 以 知道 ， 可 复 用 视图 (Reusable View) 是 被 放置 在 了 集合 视图 的 可 复 用 队 
列 中 ， 它 并 不 会 在 Header View 被 用 户 移出 手机 屏幕 范围 以 外 后 就 被 立即 删除 ， 而 是 放 在 了 集合 视图 的 可 复 用 队列 中 。 之 所 以 这 样 做 ， 完 全 是 出 于 性 能 的 考虑 。 因 为 我 们 可 以 通过 检索 ， 重 新 启用 它 来 显示 
内 容 不 同 而 外 形 一 样 的 内 容 。 


步骤 3” 回 到 故事 板 ， 选 中 Collection View Controller， 在 ldentity Inspector 中 将 Class 设 置 为 HomeVC。 然 后 从 大 纲 视图 中 选择 Collection Reusable View， 将 它 的 Class 设 置 为 Header View， 如 图 
11-11 所 示 。 
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> 图 Reset PasswordVC Scene 
Identity 


> E Tab Bar Controller Scene 
Restoration ID 


v E Homevc Scene 


v & HomeVC 
v E] Collection View www.liuming.cn TWos 
v E Header View 
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图 11-11 iX €Header View 的 类 文件 
步骤 4 ”保持 故事 板 中 选中 Collection Reusable View 的 状态 ， 在 Attributes Inspector 中 将 ldentifier 设 置 为 Header。 


这 样 做 的 目的 是 ， 当 在 代码 中 载 入 故事 板 中 的 控制 器 或 视图 的 时 候 ， 以 此 作为 标识 。 


11.3 添加 Outlet 和 Action 


接 下 来 ， 我 们 需要 为 Collection Reusable View 添 加 Outlet 和 Action。 


将 Xcode 切换 到 助手 编辑 器 模式 ， 确 定 下 面 的 窗口 打开 的 是 Header View.swift 文 件 。 为 Collection Reusable View 中 的 UI 元 素 添加 下 面 的 Outlet 属 性 ， 如 图 11-12 所 示 。 


class HeaderView: UICollectionReusableView { 
GIBOutlet weak var avalmg: UllmageView! // 用 户头 像 
@IBOutlet weak var fullnamelbl: UILabel! // 用 户 名 称 
aIBOutlet weak var webTxt: UITextView! // 个 人 主页 地 址 
QIBOutlet weak var bioLbl: UILabel! // 个 人 简介 
@IBOutlet weak var posts: UlLabel! // 帖子 数 
QGIBOutlet weak var followers: UlLabel! // 关注 者 数 
GIBOutlet weak var followings: UILabel! // 关注 数 
GIBOutlet weak var postTitle: UlLabel! // 帖子 的 Label 
@IBOutlet weak var followersTitle: UILabel! // 关注 者 的 Label 
GIBOutlet weak var followingsTitle: UILabel! // 关注 的 Label 
@IBOutlet weak var button: UIButton! // 编辑 个 人 主页 按钮 
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// HeaderView.swift 
// Instagram 


// Created by 刘 铭 on 16/7/9. 
// Copyright 9 2016F 刘 铭 . All rights reserved. 


import UIKit 


Name 'avaimg 


Type |Ulmageview — 1E 


ib! class HeaderView: UlCollectionReusableView { 


} 


Connect ) 


图 11-12 ”为 集合 视图 的 Headet 部 分 创建 关联 
Qi 如 果 底 部 窗口 没有 切换 到 HeaderView.swift， 可 以 手动 选择 该 文件 ， 或 者 在 项 目 导 航 中 按 住 option 键 后 再 单 击 相 应 文件 ， 便 会 在 底部 窗口 打开 相应 文件 。 


可 能 此 时 你 会 有 这 样 的 想法 : 明明 是 在 集合 视图 中 创建 的 Label、lmage View 和 Text View， 为 什么 不 在 HomeVC (继承 于 UICollectionViewController) 类 中 创建 这 些 Outlet 关 联 呢 ? 因为 在 本 章 我 
们 是 将 这 些 UI 元 素 放 在 了 集合 视图 的 Header 部 分 ， 并 且 为 它 设置 了 相应 的 HeaderView (继承 于 UlCollectionReusableView) 类 ， 所 以 要 在 这 里 建立 Outlet 关 联 。 


11.4 调整 集合 单元 格 


在 本 章 我 们 已 经 调整 了 集合 视图 和 可 复 用 视图 ， 接 下 来 还 要 调整 集合 视图 单元 格 (Collection View Cell) 。 


步骤 1 在 故事 板 中 选中 集合 视图 ， 然 后 在 Size Inspector 中 将 单元 格 的 大 小 设置 为 106x106， 如 图 11-13 所 示 。 
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图 11-13 设置 集合 单元 格 的 大 小 
步骤 2 创建 一 个 新 的 类 文件 ，Subclass of 设置 为 UICollectionViewCell，Name 设 置 为 PictureCell。 


步骤 3” 回 到 故事 板 ， 在 ldentity Inspector 中 设置 集合 视图 单元 格 的 Class 为 Picture-Cell， 如 图 11-14 所 示 。 在 Attributes Inspector 中 将 Identifier 设置 为 Cell。 
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图 11-14 设置 集合 单元 格 的 Class 
步骤 4 ”从 对 象 库 中 拖 忠 Image View 到 集合 视图 的 单元 格 中 ， 在 size Inspector 中 将 X 和 Y 设 置 为 0，Width 和 Height 设 置 为 106， 使 Image View 充 满 整个 单元 格 。 


步骤 5 ”将 Xcode 切 换 到 助手 编辑 器 模式 ， 在 PictureCell 类 中 创建 与 故事 板 中 Image View 的 Outlet 关 联 ，Name 设 置 为 piclmg。 


class PictureCell: UICollectionViewCell { 
GIBOutlet weak var picImg: UIImageView! 


} 


本 章 小 结 


本 章 我 们 创建 了 全 新 的 视图 控制 器 一 一 集合 视图 控制 器 ， 它 与 表格 视图 控制 器 最 大 的 区 别 就 是 它 可 以 在 一 行 中 显示 多 个 单元 格 ， 而 表格 视图 在 一 行 之 中 只 能 显示 一 个 单元 格 。 集 合 视图 与 表格 视图 的 实 
现 非 常 类 似 ， 它 们 都 继承 于 Scroll View。 


我 们 在 集合 视图 中 还 定义 了 可 复 用 视图 ， 利 用 该 视图 可 以 定义 集合 视图 中 每 个 部 分 (Section) 的 头 部 空间 视图 (Header View) 或 者 是 尾部 空间 视图 (Footer View) ， 这 是 一 种 非常 常用 的 做 法 。 


第 12 章 ”从 云端 读 取 当 前 用 户 信息 


当 我 们 创建 好 个 人 主页 界面 以 后 就 可 以 从 LeanCloud 云 端 读 取 相关 数据 了 ， 然 后 再 将 其 呈现 到 相应 的 UI 元 素 中 。 但 在 此 之 前 ， 我 们 需要 先 创建 天 联 。 


12.1 创建 个 人 主页 与 标签 控制 器 的 天 联 


最 终 的 Instagram 应 用 将 包含 多 个 功能 ， 而 个 人 主页 只 是 其 中 的 一 项 ， 所 以 需要 使 用 标签 控制 器 进行 管理 。 如 果 你 仔细 观察 会 发 现 个 人 主页 控制 器 是 包含 在 导航 控制 器 之 中 的 ， 如 图 12-1 所 示 。 因 此 这 
些 控制 器 的 层级 关系 是 : 标签 控制 器 包含 导航 控制 器 ， 导 航 控制 器 包含 HomeVC 控 制 器 。 
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图 12-1 个 人 主页 控制 器 的 结构 


步骤 1 在 故事 板 中 选中 HomeVC， 在 Xcode 菜 单 中 选择 Editor 一 Embed In 一 Navigation Controller， 此 时 HomeVC 出 现 了 导航 栏 。 


步骤 2， 在 标签 控制 器 上 按 住 control 键 ， 拖 电 鼠 标 到 新 创建 的 导航 控制 器 上 ， 快 捷 菜单 中 选择 Relationship Segue 中 的 view controllers， 当 关联 创建 完成 以 后 ， 导 航 控制 器 将 作为 标签 控制 器 的 子 视 
图 ， 如 图 12-2 所 示 。 
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图 12-2 ”为 标签 控制 器 与 导航 控制 器 建立 联系 
步骤 3 ”选中 HomeVC 控 制 器 ， 在 ldentity Inspector 中 将 Storyboard IDiz&7jHomeVC, 


其 实 ， 在 很 多 应 用 程序 中 我 们 都 会 看 到 标签 控制 器 和 导航 控制 器 的 组 合 。 最 著名 的 要 数 微 信 ， 它 的 标签 控制 器 中 包含 四 个 子 控制 器 ， 每 个 子 控制 器 都 是 以 导航 控制 器 开始 的 。 另 外 ， 新 浪 微 博 和 iOS 的 电 
话 应 用 都 是 这 样 的。 一 般 情况 下 ,我们 都 是 在 标签 控制 器 中 关联 导航 控制 器 ， 很 少将 它们 反 过 来 。 在 导航 控制 器 的 控制 器 堆栈 中 插入 一 个 标签 控制 器 似乎 显得 有 些 别 握 。 


12.2 ”修改 HomeVC 的 代码 


接 下 来 ,我 们 需要 对 HomeVC 的 代码 进行 修改 ， 利 用 集合 视图 相关 的 委托 协议 在 Header 部 分 中 显示 用 户 数据 。 


在 当前 的 HomeVC 类 的 声明 中 ， 我 们 并 没有 发 现 集合 视图 委托 协议 (UlCollection-ViewDelegate 和 UICollectionViewDataSource) ， 这 是 因为 HomeVC 直 接 继承 于 UlCollection-ViewController, 
在 其 父 类 的 声明 中 已 经 完成 了 这 步 操作 。 在 HomeVC 中 按 住 command 键 后 单 击 HomeVC 声 明 时 所 继承 的 UICollectionViewController 类 ， 此 时 编辑 窗口 会 跳 转 到 UlCollectionViewController 的 声明 文 
件 : 


public class UICollectionViewController : UIViewController, UICollection- 
ViewDelegate, UlCollectionViewDataSource í(--- 


与 表格 的 相关 协议 类 似 ，UICollectionViewDelegate 协 议定 义 的 方法 允许 我 们 去 管理 集合 视图 的 交互 选择 和 高 亮 ， 以 及 实现 单元 格 在 交互 单 击 后 的 动作 ， 这 个 协议 中 的 方法 都 是 可 选 的 。 另 外 ， 凡 是 符 
合 UICollectionViewDataSource 协 议 的 对 象 (例如 HomeVC 类 ) ， 必 须 为 集合 视图 提供 必要 的 数据 和 视图 。 通 过 该 协议 对 象 (HomeVC) ， 除 了 将 数据 模型 或 相关 的 数据 提供 给 集合 视图 以 外 ， 它 还 要 负 
责 创建 和 配置 单元 格 以 及 附属 视图 (Header View) 的 数据 显示 。 


~ 


步骤 1 在 HomeVC.swift 文 件 中 删除 import UIKit 语 句 下 面 的 私有 常量 reuseldentifier 的 定义 ， 因 为 之 前 已 经 在 故事 板 中 为 集合 视图 的 单元 格 定义 了 Identifier 属性 为 Cell。 


import UIKit 
private let reuseIdentifier - "Cell" 


步骤 2 ”删除 viewDidLoad() 方 法 中 对 单元 格 注册 的 方法 : 


// Register cell classes 
self.collectionView!.register (UICollectionViewCell.self, forCellWithReuse 
Identifier: reuselIdentifier) 


实际 上 ， 该 方法 会 为 在 集合 视图 中 所 创建 的 新 的 单元 格 注册 一 个 类 。 在 调用 dequeueRe-usableCell(withReuseldentifier:for:) 方 法 获取 可 复 用 单元 格 之 前 我 们 必须 先 执行 它 。 或 者 直接 使 用 
register( :forCellWithReuseldentifier:) 方 法 创建 一 个 新 的 单元 格 类 ， 如 果 当 前 指定 的 单元 格 类 型 没有 在 可 复 用 队列 中 ， 则 会 自动 创建 一 个 全 新 的 单元 格 对 象 。 因 为 要 使 用 后 者 的 方法 ， 所 以 在 这 里 直接 删除 
该 方法 的 调用 代码 。 


步骤 3 ”使 用 /**/ 暂 时 注释 掉 collectionView(_collectionView:UlCollectionView,cellFor-ltemAt indexPath:IndexPath) 方 法 的 全 部 代码 。 


/* 
override func collectionView(  collectionView: UlCollectionView, cellForItemAt indexPath: IndexPath) -> UlCollectionViewCell { 
let cell = collectionView.dequeueReusableCell (withReuseIldentifier: reuseIdentifier, 
for: indexPath) 
// Configure the cell 
return cell 
} 
AJ 


该 方法 是 UICollectionViewDataSource 协 议 所 定义 的 方法 ， 用 于 为 集合 提供 指定 的 单元 格 对 象 。 本 章 我 们 的 任务 是 完成 附属 视图 (Header View) 中 数据 的 显示 ， 所 以 暂时 将 该 方法 注释 掉 。 


步骤 4 在 HomeVC 类 中 添加 新 的 方法 collectionView( :,viewForSupplementaryElement-OfKind:,at:)， 并 实现 下 面 的 代码 : 


override func collectionView(  collectionView: UlCollectionView, viewForSupp- 
lementaryElementOfKind kind: String, at indexPath: IndexPath) -» UICollection- 
ReusableView { 
let header = self.collectionView?.dequeueReusableSupplementaryView (ofKind: UICollec- 

tionElementKindSectionHeader, withReuseIldentifier: "Header", for: indexPath) as! HeaderView 


) 


当 集 合 视图 需要 在 屏幕 上 显示 附属 视图 的 时 候 会 调用 该 方法 ， 向 HomeVC 对 象 索要 相关 的 视图 对 象 。 在 上 面 的 方法 中 ， 通 过 集合 视图 的 dequeueReusableSupplementaryView() 方 法 ， 从 可 复 用 队列 
中 索要 参数 withReuseldentifier 指 定 的 视图 对 象 ， 这 个 Identifier 就 是 之 前 章节 中 ， 我 们 在 故事 板 中 为 Header View 定 义 的 ldentifier， 如 图 12-3 所 示 。 
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图 12-3 在 故事 板 中 定义 的 Header Viewty Identifier 


接 下 来 我们 需要 将 当前 用 户 的 信息 显示 到 附属 视图 中 。 


步骤 5 在 之 前 添加 的 collectionView( :,viewForSupplementaryElementOfKind:,at:) 方 法 中 ， 添 加 下 面 的 代码 : 


header.fullnameLbl.text = (AVUser.current().object(forKey: "fullname") as? String)?.uppercased() 
header.webTxt.text = AVUser.current().object(forKey: "web") as? String 
header.webTxt.sizeToFit() 

header.bioLbl.text = AVUser.current().object(forKey: "bio") as? String 
header.bioLbl.sizeToFit() 


在 这 段 代 码 中 ， 以 fullnameLb 为 例 ， 我 们 先 通过 AVUser 类 获取 到 当前 用 户 的 信息 ， 然 后 再 通过 object(forkey:) 方 法 获取 用 户 fullname 字 段 的 信息 ，fullname 字 段 的 信息 是 我 们 在 用 户 注册 的 时 候 填 写 


因为 以 字典 的 Key 方 式 获取 到 的 数据 是 可 选 类 型 ， 所 以 获取 到 的 这 个 数据 是 可 选 类 型 。 因 为 通过 object(forkey:) 方 法 得 到 的 是 Any 类 型 的 数据 ， 所 以 需要 使 用 as? 将 其 转换 到 String 类 型 。 因 为 转换 成 
string 类 型 后 依然 是 可 选 类 型 ， 所 以 在 将 其 转换 成 大 写 的 时 候 依 然 需 要 使 用 ”作为 后 缀 。 


sizeToFit0) 方 法 的 用 途 是 调整 视图 的 大 小 ， 让 它 正好 包裹 住所 显示 的 文字 内 容 。 


步骤 6 在 之 前 的 代码 下 面 继续 添加 用 户头 像 的 相关 代码 : 


let avaQuery = AVUser.current().object(forKey: "ava") as! AVFile 
avaQuery.getDatalnBackground ( (data:Data?, error:Error?) in 
header.avalmg.image = UIImage (data: data!) 


return header 


继续 通过 object(forKey:) 方 法 获取 LeanCloud 云 端 ava 字 有 段 的 数据 ， 之 前 在 注册 时 ava 字 段 存储 的 是 AVFile 类 型 的 数据 ， 因 此 在 获取 的 时 候 也 要 将 其 转换 为 AVFile 类 型 。 


— Ml 


当 我 们 获取 到 AVFile 类 型 的 数据 后 并 不 能 将 它 直 接 作为 文件 使 用 ， 而 是 需要 执行 一 段 闭 包 代 码 。 通 过 AVFile 类 的 getDatalnBackground( :) 方 法 在 后 台 线 程 中 从 LeanCloud 云 端 下 载 数据 ， 当 下 载 完 成 
以 后 会 执行 一 个 闭 包 ， 它 包含 两 个 参数 : data 是 下 载 的 数据 ，error 是 当 发 生 错误 时 所 存储 的 错误 信息 。 


构建 并 运行 项 目 ， 按 照 正 常 的 逻辑 来 说 ， 当 用 户 在 Instagram 中 登录 成 功 后 会 显示 HomeVC 的 界面 ， 即 显示 附属 视图 中 的 用 户 信 息 。 但 是 想法 很 美好 ， 现 实 却 很 残酷 。 在 当前 的 导航 控制 器 中 我 们 不 会 
看 到 任何 内 容 。 如 果 你 在 collectionView(_:viewForSupplementa-ryElementOfKind:,at:) 方 法 上 添加 断 点 的 话 ， 就 会 发 现 程序 根本 不 会 调用 该 方法 ， 这 是 为 什么 呢 ? 


问题 出 现在 numberOfsections(in:) 方 法 上 ， 该 方法 会 通过 返回 值 告 诉 集合 视图 需要 多 少 个 部 分 。 因 为 每 个 部 分 都 包含 Header、Footer 和 单元 格 列表 。 当 它 的 返回 值 为 0 时 ， 也 就 代表 当前 的 集合 视图 
不 会 显示 任何 内 容 了 。 因 此 ， 解 决 问题 的 办 法 是 将 返回 值 设 置 为 1， 或 者 是 直接 删除 numberOfsections(in:) 方 法 ， 因 为 默认 情况 下 集合 视图 的 Section 是 1。 


步骤 7” 在 HomeVC.swift 文 件 中 直接 删除 numberOfsections(kin:) 方 法 。 


再 次 构建 并 运行 项 目 ， 残 酷 的 现实 又 摆 在 我 们 面前 ， 此 时 应 用 程序 是 衣 溃 的 ， 如 图 12-4 所 示 。 


iPhone SE - iOS 10.0 (14A5297c) 
运营 商 令 下 午 9:22 aee let avaQuery = AVUser.current().object(forKey: "ava") as! AVFile 
avaQuery.getDataInBackground ( (data:Data?, error:NSError?) in 


I header.avalmg.image = UIImage(data: data!) 
} Thread 1: EXC. BAD INSTRUCTION (code-EXC 1386. INVOP, subcode=0x0) 


return header 
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e: Mere t can be 


XI TE | " 
刘 铭 .中 国 2016-07-10 21:22:45. 658340 

d Instagram[16762:158698] subsystem: 
i E com.apple.BackBoard, category: 
iOS 开 发 程序 员 FenceWorkspaceVerbose, enable_level: 1, 
persist level: 0, default ttl: 6, 
info tt1: 0, debug ttl: 6, 
generate symptoms: 0, enable oversize: 0, 
privacy.setting: 6 
1 2016-07-10 21:22:45,.659004 


图 12-4 项 目 运行 报错 


通过 观察 调试 控制 台中 的 信息 可 以 发 现 ， 苹 果 的 App Transport Security 特 性 禁止 了 明文 HTTP 资 源 下 载 。 在 2015 年 的 WWDC 大 会 上 苹果 使 用 了 一 个 新 特性 来 提高 操作 系统 的 安全 性 ， 这 就 是 应 用 程序 


传输 安全 协议 (App Transport Security, ATS) 。 


12.3 ”应 用 程序 传输 安全 协议 


ATS 的 目标 是 提高 苹果 操作 系统 的 安全 性 ， 以 及 在 此 系统 上 运行 的 任何 应 用 程序 的 安全 性 。 
基于 HTTP 传 输 数 据 的 网 络 请 求 都 是 明文 的 ， 这 明显 会 引起 相当 大 的 安全 风险 。 苹 果 强 调 每 个 开发 者 都 应 该 致力 于 保证 客户 的 数据 是 安全 的 ， 尽 管 那些 数据 可 能 看 起 来 并 不 是 很 重要 或 者 敏感 。 
ATS 通 过 强力 推行 一 系列 最 好 的 安全 实际 操作 来 积极 地 促进 安全 性 ， 最 重要 的 一 个 就 是 要 求 网 络 请 求 必须 在 一 个 安全 的 链接 上 传输 。 开 局 ATS 以 后 ， 网 络 传输 自动 通过 HTTPSs 传 输 而 不 是 HTTP。 


有 了 上 面 的 知识 储备 我 们 就 明白 之 前 应 用 程序 为 什么 崩溃 了 ， 但 是 如 何 解决 呢 ? 因为 不 知道 LeanCloud SDK 会 访问 哪些 域名 ， 我 们 不 可 能 指明 哪些 域名 支持 ATS 要 求 且 在 HTTPS 上 传输 。 在 这 种 情况 
下 ， 除 了 全 部 撤销 ATS 没 有 其 他 办 法 。 此 外 ， 因 为 ATS 是 系统 默认 强制 执行 的 ， 所 以 需要 显 性 撤销 它 。 
在 Instagram 应 用 的 Info.plist 文 件 中 ， 为 NSAppTransportSecurity 关 键 值 添加 一 个 字典 (Dictionary) ， 这 个 字典 应 该 包括 一 个 关键 字 一 NSAllowsArbitraryLoads， 以 及 它 的 值 要 设置 为 YES。 


12-5 显 示 的 就 是 Instagram 应 用 的 Info.plist 文 件 所 呈现 的 内 容 : 


> Fonts provided by application 
v App Transport Security Settings ' Dictionary (1 item) 


Allow Arbitrary Loads \ Boolean YES 


图 12-5 ”在 info.plist 配 置 文件 中 添加 选项 


最 后 ， 在 故事 板 中 将 HomeVC 的 集合 视图 背景 色 设置 为 白色 ， 否 则 整个 界面 会 很 难看 。 


构建 并 运行 项 目 ， 此 时 Instagram 终 于 在 模拟 器 中 正常 显示 了 ， 如 图 12-6 所 示 。 


图 12-6 ”个 人 用 户 信息 
如 果 此 时 单 击 个 人 主页 地 址 (webTxt) ， 会 发 现 它 是 可 以 编辑 的 ， 我 们 需要 修改 这 个 问题 。 


故事 板 中 选中 webTxt， 在 Attributes Inspector 中 去 掉 勾 选 Behavior 中 的 Editable， 并 将 Data Detectors 中 的 Link 勾 选 上 ， 如 图 12-7 所 示 。 


Behavior | | Editable Selectable 
Data Detectors | Phone Number 


C) Address 


( ] Calendar Event 

( ] Shipment Tracking Number 
( ) Flight Number 

( ) Lookup Suggestion 


图 12-7 设置 webTxt 的 Behavior 和 数据 检测 


12.4 ”设置 导航 栏 标题 


在 HomeVC 类 中 的 viewDidLoad() 方 法 里 面 ， 需 要 设置 导航 栏 的 标题 为 当前 用 户 的 用 户 名 。 


override func viewDidLoad() { 
super.viewDidLoad() 
// 导航 栏 中 的 Title 设 置 
self.navigationItem.title = AVUser.current().username.uppercased() 


} 


这 里 的 UINavigationltem 对 象 管理 着 呈现 在 导航 栏 上 的 按钮 和 视图 ， 如 图 12-8 所 示 。 在 一 个 导航 控制 器 的 界面 中 ， 每 个 压 入 导航 栈 中 的 视图 控制 器 都 需要 一 个 navigation item， 它 包含 了 展示 在 导航 
栏 上 的 按钮 和 视图 。 导 航 控制 器 利用 最 顶层 (当前 显示 在 屏幕 上 的 导航 栈 中 的 控制 器 ) 的 两 个 视图 控制 器 的 navigation item 来 提供 导航 栏 的 内 容 。 
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图 12-8 设置 导航 栏 的 Title 


Qi 为 什么 导航 栏 的 内 容 需 要 最 顶层 的 两 个 视图 控制 器 的 navigation item 信 息 呢 ? 因为 一 般 在 导航 栏 的 左 侧 会 有 一 个 返回 按钮 (UIBarButtonItem 类 型 ) ， 在 默认 情况 下 ， 它 会 自动 显示 之 前 一 个 控制 


器 的 title， 如 图 12-9 所 示 。 导 航 栏 中 的 隐私 就 是 当前 控制 器 栈 中 位 于 顶层 控制 器 的 navigation item 的 title 信 息 。 而 它 左 侧 的 设置 则 是 前 一 个 控制 器 的 navigation item 的 title 信 息 。 


图 12-9 ”设置 应 用 的 导航 栏 


实际 上 ，navigationltem 是 UIViewController 的 直接 属性 ， 我 们 可 以 对 任何 类 型 视图 控制 器 设置 这 个 属性 。 如 果 该 控制 器 被 压 入 到 导航 控制 器 的 控制 器 栈 中 ， 会 将 navigationltem 属 性 中 的 信息 呈现 到 
导航 栏 中 ， 如 果 该 控制 器 没有 被 压 入 到 控制 器 栈 中 ， 设 置 它 则 没有 任何 的 意义 。 


如 果 把 导航 控制 器 比 作 一 台电 视 ， 那 导航 栏 就 相当 于 液晶 显示 屏 ， 显 示 屏 必然 是 属于 电视 的 ， 所 以 导航 栏 是 导航 控制 器 的 一 个 属性 。 视 图 控制 器 (UlViewController) 就 相当 于 一 个 个 电视 台 (湖南 卫 
视 、 浙 江 卫视 等 ) ， 而 导航 项 (navigation item) 就 相当 于 每 个 电视 台 的 台 标 ， 呈 现在 电视 显示 屏 的 左上 角 ， 负 责 让 观众 知道 当前 放 的 是 哪个 台 的 节目 。 显 然 ， 导 航 项 应 该 是 视图 控制 器 的 一 个 属性 。 虽 然 
导航 栏 和 导航 项 都 在 做 与 导航 相关 的 事情 ， 但 是 它们 的 从 属 是 不 同 的 。 


本 章 小 结 


本 章 我 们 从 LeanCloud 云 端 下 载 图 片 数据 的 时 候 遇 到 了 苹果 的 App Transport Security (ATS) 策略 ， 它 是 一 个 提升 App 网 络 服务 连接 安全 性 的 特性 ， 默 认 网 络 连 接 必 须 执行 安全 链接 ， 运 行 在 iOs 9 及 
OS X 10.11 以 上 版 本 。 我 们 可 以 在 info.plist 配 置 文件 中 关闭 安全 传输 特性 。 


第 13 章 ”在 个 人 主页 中 显示 帖子 信息 


要 想 从 LeanCloud 云 端 接收 用 户 所 发 布 的 帖子 并 显示 到 集合 视图 中 ， 我 们 首先 需要 在 LeanCloud 的 Instagram 应 用 中 创建 一 个 数据 表 一 一 Posts， 它 负责 存储 用 户 的 帖子 。 


如 果 你 具有 数据 库 (MySql, SQL Server 等 ) 开发 经 验 ， 那 么 对 数据 表 以 及 SQL 语句 就 不 会 陌生 。 因 为 在 进行 数据 库 相 关 的 应 用 程序 开发 过 程 中 ， 我 们 必须 要 操作 数据 表 ， 并 使 用 SQL 语句 对 数据 表 进 
行 增删 改 查 的 操作 。 当 然 ， 如 果 你 不 熟悉 也 没有 关系 ， 因 为 在 LeanCloud 中 ， 我 们 所 面向 的 数据 表 都 是 数据 类 ， 不 管 结果 多 少 ， 属 性 具体 合 义 如 何 ， 它 们 都 可 以 抽象 成 统一 的 对 象 来 处 理 。LeanCloud 支 持 
存储 任意 类 型 的 对 象 ， 支 持 对 象 的 增 、 删 、 改 、 碍 等 多 种 操作 ， 并 且 开 发 者 无 须 担心 数据 规模 的 大 小 和 访问 流量 的 多 少 ， 直 接 将 LeanCloud 云 端 看 成 是 一 个 面向 对 象 的 海量 数据 库 来 使 用 即 可 。 


13.4 在 LeanCloud 云 端 创建 数据 类 


步骤 1 登录 LeanCloud 控 制 台 ， 进 入 到 Iinstagram 应 用 ， 单 击 页 面 左 侧 数 据 表 列 表 中 的 小 齿轮 图 标 ， 如 图 13-1 所 示 ， 从 快捷 菜单 中 选择 创建 Class。 


数据 


创建 Class 


如 何 管理 我 的 数据 ? 
* 从 左 侧 选择 一 个 class 可 以 查看 相关 数据 


数据 导入 « 你 也 可 以 创建 新 的 class， 或 导入 已 有 数据 
。 WLED ETEM 


Arrow/Tab 切换 单元 格 
EE o Enter 当前 单元 格 名 称 为 Objectid 时 ， 打 开 视 图 窗口 
_Follower | Enter 当前 单元 格 类 型 为 Fle 时 ， 打 开 文 件 窗口 


Hole e 当 单 元 格 数 据 较 多 时 ， 更 方便 的 编辑 当前 单元 格 


图 13-1 在 LeanCloud 中 创建 新 的 数据 表 


步骤 2 ”将 Class 名 称 设置 为 Posts， 其 他 选项 默认 即 可 ， 单 击 创建 Class 按 钮 ， 如 图 13-2 所 示 。 


当 创建 好 Posts 类 以 后 ， 可 以 发 现 它 目 前 只 包含 四 个 字段 : 


- objectId 该 数据 行 的 唯一 ld 标识 。 


Gi Class © 


Class 名 称 

| Posts 

只 能 包含 字母 、 数 字 、 下 划 线 ， 必 须 以 字母 开头 
L 创建 为 日 志 表 C 


设置 数据 条 目的 默认 ACL 权限 C. 
限制 写 入 


对 象 创建 者 可 读 、 可 写 ， 其 他 人 可 读 、 不 可 写 


— 对象 创 建 者 可 读 、 可 写 ， 其 他 人 不 可 读 、 不 可 写 


限制 所 有 
O 。 所 有 人 不 可 写 ， 仅 对 象 创建 者 可 读 
可 在 服务 端 使 用 MasterKey 绕 过 权限 控制 


O D, 
O  BPBASR. 95 
务必 自行 增加 访问 权限 控制 


数据 对 象 的 默认 ACL 权限 设置 ， 仅 在 创建 Class 时 可 以 调整 。 后 续 如 果 要 修改 权限 设置 ， 可 
通过 SDK 或 REST API 中 的 ACL 设置 接口 


图 13-2 设置 Class 名 称 为 Posts 


* ACL 


访问 控制 列表 ， 用 于 设置 当前 行 的 访问 控制 权限 。 


' createdAtfeupdatedAt 


数据 行 被 创建 和 修改 的 时 间 。 
我 们 还 需要 添加 更 多 的 字段 到 Posts 类 中 。 


步骤 3 在 Posts 类 中 单 击 添加 列 ， 将 列 名 称 设置 为 pic， 列 类 型 设置 为 File， 单 击 创建 按钮 。 该 字段 是 AVFile 类 型 ， 用 于 在 云端 存储 应 用 程序 中 的 照片 ， 如 图 13-3 所 示 。 


只 能 包含 字母 、 数 字 、 下 划 线 ， 必 须 以 字母 或 数字 开头 


Fe 


O Ri 


只 
J 必 填 项 |_| EPRI 


图 13-3 ”在 Posts 数 据 表 中 创建 AVFile 类 型 的 pic 字段 


除了 应 用 内 数据 存储 之 外 ，LeanCloud 云 端 也 支持 文件 (AVFile) 类 数据 的 存储 。 这 里 的 文件 指 的 是 图 片 、 音 乐 、 视 频 等 常见 的 文件 类 型 ， 以 及 其 他 任何 二 进 制 数据 。 因 为 AVObject (数据 表 中 的 记录 
对 象 ) 有 大 小 限制 ， 所 以 超过 128KB 的 数据 不 能 直接 存储 到 AVObject 中 ; 而 且 更 重要 的 是 ， 对 于 图 片 、 音 乐 、 视 频 类 数据 ， 因 为 它们 的 体积 太 大 ， 为 了 终端 用 户 有 快捷 的 下 载体 验 ， 都 需要 额外 的 CDN 加 
速 服务 ， 这 时 候 就 需要 使 用 特别 的 AVFile 类 型 来 存储 文件 。 


Qi coNG 4k Content Delivery Netwotk， 即 内 容 分 发 网 络 。 其 基本 思路 是 尽 可 能 各 开 互联 网 上 有 可 能 影响 数据 传输 速度 和 稳定 性 的 瓶颈 和 环节 ， 使 内 容 传输 得 更 快 、 更 稳定 。 通 过 在 网 络 各 处 
放置 节点 服务 器 所 构成 的 在 现 有 互联 网 基础 上 的 一 层 智能 虚拟 网 络 ，CDN 系 统 能 够 实时 地 根据 网 络 流量 和 各 节点 的 连接 、 负 载 状况 以 及 到 用 户 的 距离 和 响应 时 间 等 综合 信息 将 用 户 的 请 求 重 新 导向 离 用 户 最 
近 的 服务 节点 上 。 其 目的 是 使 用 户 可 就 近 取 得 所 需 内 容 ， 解 决 Internet 网 络 拥挤 的 状况 ， 提 高 用 户 访问 网 站 的 响应 速度 。 


步骤 4 继续 添加 列 ， 包 括 : String 类 型 的 username，String 类 型 的 title，String 类 型 puuid (作为 帖子 的 唯一 标识 ) ，File 类 型 的 ava (存储 用 户头 像 ) 。 


大 家 可 能 会 疑惑 : 我 们 已 经 在 两 个 数据 表 (_User 和 Posts) 中 定义 ava 字 段 来 存储 用 户头 像 ， 这 样 不 会 产生 数据 匈 余 吗 ? 其 实 ， 不 管 是 在 哪个 数据 表 中 的 ava 字 段 ， 它 里 面 并 没有 存储 真正 的 文件 ， 而 只 
是 文件 的 链接 ， 我 们 根本 不 用 关心 实际 文件 的 位 置 ， 只 要 通过 AVFile 类 的 getDatalnBackground( ;) 方 法 就 可 以 获取 到 文件 的 数据 。 


对 于 数据 表 中 的 字段 ， 它 必须 是 由 字母 、 数 字 或 下 划 线 组 成 的 字符 串 ; 开发 者 自 定义 的 键 , 不 能 以 ( 双 下 划 线 ) 开头 。 字 段 的 类 型 可 以 是 字符 串 、 数 字 、 布 尔 值 ， 或 是 数组 和 字典 。 在 云端 的 内 
部 ，LeanCloud 将 数据 存储 为 JJON 格 式 ， 因 此 所 有 能 被 转换 成 JSJON 的 数据 类 型 都 可 以 保存 在 LeanCloud 云 端 。 总 结 来 说 ， 字 段 所 允许 的 类 型 包括 : String 字 符 串 、Number 数 字 、Boolean 布 尔 类 型 、 
Array 数 组 、Object 对 象 、Date 日 期 、Bytes base64 编 码 的 二 进 制 数据 、File 文 件 和 Null 空 值 。 


在 我 们 开始 编写 代码 从 云端 接收 帖子 信息 之 前 ， 还 需要 为 Posts 类 添加 一 些 帖 子 信息 。 


Qus 在 编写 本 书 时 ， 笔 者 想 用 uuid 作 为 帖子 的 唯一 标识 ， 虽 然 在 LeanCloud 云 端的 数据 表 中 可 以 成 功 创建 该 字段 ， 但 是 在 执行 代码 的 时 候 只 要 设置 uuid 字 段 的 值 ， 应 用 程序 就 会 前 演 ， 可 见 uuid 是 
LeanCloud 数 据 表 的 保留 关键 字 。 


步骤 5 ”在 Posts 数 据 表 中 单 击 添加 行 创建 一 行 数据 ，username 设 置 为 User 表 中 已 有 的 username，title 可 以 设置 为 这 是 我 的 第 一 个 帖子 ! 好 激动 ，puuid 设 置 为 1， 单 击 pic 字 段 的 上 传 按 钮 上 传 一 张 图 
片 ， 同 样 单 击 ava 字 段 的 上 传 按 钮 上 传 一 张 用 户头 像 ， 如 图 13-4 所 示 。 


EL 删除 行 添加 列 | 查询 ， 刷 新 | 其 他 ~ 


username S.. 7 | title STRING | puuid STRING Y | pic FILE | ava FILE | createdAt DATE 


Liuming 这 是 我 的 第 一 个 帖子 ! 好 激动 1 PIC 20150727 1. (.f&)|X| xeómkvFOneTMAK. [上 传 ] X | 2016-07-11 05:53:40 


图 13-4 ”在 Posts 数 据 表 中 添加 一 行 记录 


13.2 编号 接收 数据 的 代码 


当 LeanCloud 云 端的 Posts 数 据 表 准备 好 数据 以 后 ， 我 们 就 可 以 在 Instagram 项 目 中 读 取 它们 了 。 


步骤 1 在 HomeVC 类 中 添加 下 面 几 个 属性 。 


class HomeVC: UIlICollectionViewController { 


// 刷新 控件 

var refresher: UlRefreshControl! 
// 每 页 载 入 帖子 (图 片 ) 的 数量 

var page: Int = 12 

var puuidArray = [String] () 
var picArray = [AVFile]|() 


在 代码 中 ， 我 们 定义 了 一 个 UlRefreshControl 类 型 的 对 象 refresher， 它 是 一 个 标准 的 刷新 控件 ， 用 于 在 表格 视图 或 集合 视图 上 处 理 网 络 数据 的 刷新 。 而 page 则 代表 每 次 从 云端 载 入 的 帖子 数量 ， 因 为 
我 们 不 可 能 一 次 载 入 用 户 所 有 的 帖子 ， 所 以 这 里 设置 为 每 次 显示 12 条 帖子 信息 ， 设 置 12 是 因为 在 集合 视图 中 每 行 呈现 三 个 单元 格 。 


另外 ， 我 们 还 创建 了 两 个 数组 (puuidArrayfüpicArray) ， 它 们 分 别 存储 帖子 的 puuid 和 Ppic 信 息 。 


步骤 2 在 viewDidLoad() 方 法 的 底部 ， 添 加 下 面 的 代码 : 


// 设置 [refresher 控 件 到 集合 视图 之 中 

refresher = UIRefreshControl () 
refresher.addTarget (self, action: #selector (refresh), 
for: UlControlEvents.valueChangeg) 
collectionView?.addSubview (refresher) 


在 上 面 的 代码 中 ， 我 们 首先 创建 UIRefreshControl 对 象 ， 然 后 执行 addTarget(_:action:for) 方 法 ， 这 样 ， 当 用 户 在 集合 视图 中 进行 拉 电 操作 时 会 触发 refresher 的 valueChanged 事 件 ， 进 而 会 执行 
refresh () 方 法 ， 最 后 一 行 代码 是 将 refresher 季 加 到 集合 视图 之 中 。 


步骤 3 在 HomeVC 中 添加 refresh() 方 法 。 


func refresh() { 
collectionView?.reloadData () 


) 


在 该 方法 中 让 集合 视图 重新 载 入 数据 。 


步骤 4 在 refresh() 方 法 的 下 面 ， 添 加 loadPosts() 方 法 。 


func loadPosts() { 

let query = AVQuery(className: "Posts") 
query?.whereKey("username", equalTo: AVUser.current ().username) 
query?.limit = page 
query?.findObjectsInBackground(( (objects:[Any]?, error:Error?) in 


)) 


在 该 方法 中 ， 首 先 创建 了 AVQuery 类 型 的 对 象 ， 通 过 该 类 我 们 可 以 进行 数据 的 查询 。 将 参数 className 设 置 为 Posts， 意 味 着 本 次 查询 是 针对 云端 的 Posts 数 据 表 。 


通过 AVQuery 类 的 whereKey( :,equalTo:) 方 法 ， 可 以 查询 Posts 数 据 类 中 username 字 段 中 等 于 字符 串 为 当前 用 户 名 称 字 符 串 的 数据 行 。 该 方法 的 第 二 个 参数 名 称 为 equalTo， 代 表 等 于 。 该 query 对 象 
Ri: 查找 Posts 数 据 表 中 username 字 段 等 于 当前 用 户 username 属 性 值 的 记录 ， 并 且 先 找 出 前 10 条 。 除 了 equalTo 以 外 还 有 其 他 类 似 的 方法 ， 如 表 13-1 所 示 。 


的 意 


413-1. AVQuery 类 中 不 同情 况 的 查询 方法 


逻辑 操作 AVQuery 方法 


等 于 whereKey( :, equalTo:) 

ASSET whereKey( :, notEqualTo:) 

Ed whereKey( :, greaterThan:) 

Ads whereKey( :, greaterThanOrEqualTo:) 
PT whereKey( :, lessThan:) 

小 于 等 于 whereKey( :, lessThanOrEqualTo:) 
包含 whereKey( :, contains:) 

TE whereKey( :, hasPrefix:) 

后 级 whereKey( :, hasSuffix:) 


如 果 你 之 前 有 使 用 过 MySQL 数 据 库 的 经 验 ， 就 能 轻而易举 地 将 上 面 的 代码 转化 为 下 面 这 样 的 SQL 语句 。 


select * from Posts where username = AVUser.current().username 


AVQuery 在 后 台 也 是 执行 类 似 的 操作 ， 只 不 过 LeanCloud 为 了 防止 查询 出 来 的 结果 太 多 ， 默 认 针 对 查询 结果 有 一 个 数量 限制 ， 即 limit， 它 的 默认 值 是 100。 比 如 一 个 查询 会 得 到 10?000 个 对 象 ， 那么 一 
次 查询 只 会 返回 符合 条 件 的 100 个 结果 。limit 允 许 取 值 范 围 是 1~1000。 在 上 面 的 代码 中 设置 limit 返 回 10 条 结果 。 


最 后 ， 我 们 通过 AVQuery 类 的 findObjectsiInBackground( :方法 ， 在 后 台 线 程 中 从 LeanCloud 云 端 查询 Posts 数 据 表 中 符合 条 件 的 记录 。 如 果 查 询 结束 则 会 执行 闭 包 中 的 代码 ， 它 包含 两 个 参数 。 第 一 
个 是 [Any]? 一 一 Any 类 型 的 可 选 数组 。 因 为 可 能 会 返回 多 条 记录 ， 所 以 需要 使 用 数组 ; 又 因为 有 可 能 没有 查询 到 记录 ， 所 以 需要 使 用 可 选 。 第 二 个 参数 是 Error? ， 如 果 查 询 中 出 错 了 ， 错 误 信息 将 封装 到 这 
里 。 


步骤 5 在 findObjectsinBackground( :) 闭 包 中 继续 添加 代码 : 


query?.findObjectsInBackground(( (objects:[Any]?, error:Error?) in 
// 查询 成 功 

if error == nil ( 
// 清空 两 个 数组 
self.puuidArray.removeAll(keepingCapacity: false) 
self.picArray.removeAll(keepingCapacity: false) 


在 闭 包 中 ， 如 果 error 等 于 nil 代 表 碍 询 成 功 ， 我 们 先 清空 两 个 数组 。 清 空 数组 的 方法 有 很 多 ， 这 里 使 用 集合 的 removeAll(keepingCapacity:) 方 法 。 它 包含 一 个 参数 ， 当 参数 值 为 true 的 时 候 ， 并 不 会 释 
WRA (数组 、 字 典 和 Set 统 称 为 集合 ) 中 的 数据 ， 也 就 意味 着 数据 对 象 虽然 从 集合 数组 中 被 清除 了 ， 但 不 会 在 内 存 中 被 释放 ， 这 是 出 于 性 能 的 考虑 。 如 果 参 数值 为 false 则 直接 释放 。 


步骤 6 在 清空 两 个 数组 以 后 ， 继 续 添加 下 面 的 代码 : 


self.picArray.removeAll(keepingCapacity: false) 
for object in objects! { 
// 将 查询 到 的 数据 添加 到 数组 中 
self.puuidArray.append((object as AnyObject).value(forKey: "puuid") as! String) 
self.picArray.append((object as AnyObject).value(forKey: "pic") as! AVFile) 


) 


self.collectionView?.reloadData () 


通过 for 循 环 我 们 和 运 代 出 每 条 Any 类 型 的 对 象 ， 但 是 Any 类 型 是 非常 “干净 ”的 类 型 ， 我 们 几乎 不 能 对 它 做 任何 事情 ， 所 以 使 用 as 将 其 转换 为 AnyObject 类 型 ， 这 样 我 们 就 可 以 使 用 value(_:) 方 法 获取 记 
录 的 值 。 


通过 循环 将 每 条 记录 的 puuid 添 加 到 puuidArray 数 组 中 ， 将 pic 添 加 到 picArray 数 组 中 。 当 这 些 数据 准备 好 以 后 就 可 以 让 集合 视图 重新 载 入 数据 了 。 


Qua 我 们 在 类 中 编写 代码 的 时 候 ， 人 往往 会 忽略 self.， 例 如 ，self.collectionView 和 collectionView 指 的 是 同一 个 对 象 。 但 是 如 果 想 在 闭 包 中 调用 类 的 方法 或 访问 属性 ， 必 须 加 上 self.， 因 为 闭 包 实际 上 是 
脱离 类 之 外 的 一 段 代 码 ， 或 者 说 是 一 段 临 时 代码 块 ， 它 不 属于 任何 类 ， 所 以 在 闭 包 中 必须 显 性 调用 类 中 的 方法 或 访问 类 中 的 属性 。 


步骤 7 修改 collectionView( :numberOfltemslnSection:) 方 法 : 


override func collectionView(  collectionView: UICollectionView, numberOfIltems- 
InSection section: Int) -» Int ( 
return picArray.count 


) 


在 该 方法 中 ， 根 据 picArray 数 组 的 元 素 个 数 确定 集合 视图 需要 显示 多 少 个 单元 格 。 


13.3 ”创建 单元 属相 关 代码 


本 章 之 前 的 修改 目的 在 于 从 LeanCloud 云 端 接收 Posts 数 据 ， 在 数据 准备 好 以 后 就 可 以 将 其 呈现 到 单元 格 之 中 了 。 


步骤 1 在 HomeVC 中 找到 之 前 被 注释 掉 的 collectionView( :cellForltemAt:) 方 法 ， 修 改 为 下 面 这 样 : 


override func collectionView(  collectionView: UlCollectionView, cellForItemAt indexPath: IndexPath) -> UlCollectionViewCell { 
// 从 集合 视图 的 可 复 用 队列 中 获取 单元 格 对 象 
let cell = collectionView.dequeueReusableCell (withReuseIdentifier: "Cell", for: 
indexPath) as! PictureCell 
return cell 


} 


当 集 合 视 图 初始 化 ， 收 到 reloadData0 方 法 调用 ,或 者 是 出 现在 屏幕 上 时 ， 会 调用 collectionView( :,cellForltemAt:) 方 法 。 该 方法 用 于 为 集合 视图 提供 指定 位 置 的 单元 格 对 象 。 
在 该 方法 中 ， 我 们 首先 通过 集合 视图 的 dequeueReusableCell(withReuseldentifier;,for:) 方 法 从 可 复 用 队列 中 获取 可 以 复 用 的 单元 格 对 象 ， 如 果 队 列 中 没有 ， 该 方法 会 为 我 们 新 创建 一 个 单元 格 对 象 。 


该 方法 的 第 一 个 参数 用 于 指明 从 队列 中 获取 哪 种 标识 的 单元 格 对 象 ， 在 之 前 的 实战 中 ， 我 们 在 故事 板 里 将 集合 视图 单元 格 的 Identifier (Attributes Inspector 中 ) 设置 为 Cell， 如 图 13-5 所 示 ， 它 与 当前 
代码 中 withReuseldentifier 人 参数 指明 的 字符 串 一 致 ， 代 表 从 队列 中 获取 该 类 型 的 单元 格 。 


当 获 取 到 单元 格 以 后 ， 使 用 as! 将 其 强制 转换 为 PictureCell 类 型 ， 因 为 它 本 身 就 是 PictureCell 类 型 的 单元 格 ， 如 图 13-6 所 示 ， 只 不 过 在 通过 dequeueReusableCell(withReuselde-ntifier,for) 方 法 获取 
的 时 候 默 认 是 UICollectionViewCell 类 型 。 


Collection Reusable View 


Identifier | Cell 


View 


Content Mode Center  —  — [HJ 


Semantic Unspecified i 
Tag | 0 | 


Interaction fg User Interaction Enabled 
Multiple Touch 


E13-5 it € X; E Identifier X Cell 


Custom Class 


Class PictureCell 


Module | Current - instagram 


Identity 


Restoration ID | 


图 13-6 “单元 格 的 Class 为 PictuteCell 


步骤 2 在 let cell 语 句 的 下 面 继续 添加 代码 : 


// 从 picArray 数 组 中 获取 图 片 
picArray[indexPath.row].getDataInBackground ( (data:Data?, error:Error?) in 
if error == nil { 

cell.piclImg.image = UIImage (data: data!) 


} 


} 


IndexPath 是 一 个 结构 体 ， 用 于 指明 section (部 分 ) 和 row ( 行 或 是 索引 数 ) ， 我 们 经 常会 在 表格 视图 和 集合 视图 中 见 到 它 。 这 里 ， 当 集合 视图 需要 显示 第 N 个 单元 格 的 时 候 ， 就 会 通过 IndexPath 传 递 
进 collectionView(:,cellForltemAt:) 方 法 ， 在 创建 PictureCell 对 象 的 时 候 ， 通 过 picArray[indexPath.row] 得 到 需要 显示 的 是 第 几 张 图 片 ， 然 后 再 通过 AVFile 类 的 getDatalnBackground( :) 方 法 将 图 片 数据 
下 载 到 本 地 。 


步骤 3 ”继续 在 闭 包 中 添加 下 面 的 代码 ， 当 error 不 为 空 时 则 打印 错误 信息 到 控制 台 。 


if error == nil { 
cell.piclImg.image = UIImage (data: data!) 
Jelse( 


print (error?.localizedDescription) 


) 


步骤 4 回 到 loadPosts() 方 法 中 ， 为 闭 包 中 的 if 语句 添加 else 部 分 的 代码 ， 当 查询 出 现 问题 的 时 候 我 们 可 以 知道 错误 的 原因 。 


if error == nil { 
self.collectionView?.reloadData () 

Jelse ( 

print (error?.localizedDescription) 


} 


步骤 5 在 viewDidLoad() 方 法 的 底部 添加 对 loadPosts() 方 法 的 调用 。 


override func viewDidLoad() 全 
loadPosts () 
} 


构建 并 运行 项 目 ， 此 时 在 集合 视图 中 已 经 出 现 了 之 前 添加 到 LeanCloud 云 端的 Posts 数 据 ， 如 图 13-7 所 示 。 


Qa 虽然 云端 只 有 一 条 记录 ， 但 是 我 们 可 以 使 用 一 种 投机 的 方式 显示 指定 数量 的 单元 格 。 将 collectionView(_:;numberOfLtemsInSection:) 方 法 的 返回 代码 设置 为 : return picArray.count==0?0:30。 再 将 


collectionView(_:,cellForltemAt:) 方 法 中 的 picAtray[indexPath.row].getDatalnBackground 代 码 修 改 为 picArray[0].getDataln-Background。 


通过 这 样 的 设置 ， 告 诉 集合 视图 一 共 要 显示 30 个 单元 格 ， 在 创建 这 些 单 元 格 的 时 候 ， 让 它们 全 部 显示 picAtrray 数 组 中 索引 0 的 照片 ， 效 果 如 图 13-8 所 示 。 


图 13-7 在 Instagtram 中 显示 用 户 上 传 的 照片 
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图 13-8 在 个 人 主页 中 显示 30 个 相同 帖子 的 照片 


此 时 ， 当 我 们 向 下 拖 遇 集 合 视图 的 时 候 ， 会 出 现 刷新 图 标 。 但 是 现在 这 个 图 标 在 数据 完成 刷新 以 后 还 在 转圈 圈 ， 如 图 13-9 所 示 ， 接 下 来 就 修改 这 个 Bug。 


图 13-9 ”修改 拖 如 刷新 的 Bug 


步骤 6 在 refresh() 方 法 中 添加 新 的 代码 : 


func refresh() { 
collectionView?.reloadData () 
// 停止 刷新 动画 
refresher.endRefreshing () 


构建 并 运行 项 目 ， 当 刷新 以 后 ， 圈 圈 消 失 。 
当 一 切 测试 成 功 以 后 ， 将 之 前 的 测试 用 代码 还 原 。 


步骤 7 将 collectionView( :numberoOfltemslnSection:) 方 法 的 返回 代码 还 原 为 


return picArray.count 


步骤 8 将 collectionView( :cellForltemAt:) 方 法 中 的 代码 还 原 为 : 


picArray[indexPath.row].getDataInBackground { (data:Data?, error:Error?) in 


本 章 小 结 


本 章 我 们 在 LeanCloud 云 端 创建 了 用 于 存储 用 户 帖子 的 Posts 数 据 表 ， 并 且 手 工 添加 了 一 行 记 录 ; 利用 AVQuery 类 ， 我 们 在 项 目 中 读 取 了 数据 表 中 的 帖子 记录 ; 并 利用 AVFile 类 的 
getDatalnBackground(_:) 方 法 从 云端 下 载 图 像 数据 。 


第 14 章 ”获取 用 户 的 帖子 及 关注 数 


本 章 我 们 将 解决 个 人 主页 中 三 个 统计 数据 的 获取 和 显示 问题 。 在 个 人 主页 的 顶部 ， 有 3 个 Label 分 别 负责 显示 用 户 发 布 的 帖子 总 数 ， 关 注 自己 的 用 户 (粉丝 ) 数 和 自己 关注 他 人 的 人 数 ， 如 图 14-1 所 示 。 
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图 14-1 Instagram 个 人 主页 中 的 统计 数据 


14.1 ”注册 后 的 用 户 登录 


为 了 能 够 产生 足够 的 用 户 测试 账号 ， 我 们 需要 在 iOS 模 拟 器 中 创建 至 少 5 个 用 户 账 号 。 以 现 有 的 代码 情况 来 说 ， 我 们 必须 先 在 模拟 器 中 删除 现 有 的 Instagram 应 用 ， 再 重新 编译 运行 ， 模 拟 器 会 安装 一 个 
新 的 Instagram 应 用 ， 这 样 才 能 够 重新 进入 到 注册 页 面 。 

步骤 1 在 Xcode 菜单 中 选择 Xcode 一 Open Developer Tool 一 Simulate， 在 模拟 器 中 删除 现 有 的 Instagram 应 用 。 

步骤 2 ”重新 构建 并 运行 项 目 ， 在 注册 页 面 中 输入 新 注册 用 户 的 信息 ， 单 击 注册 按钮 ， 此 时 应 用 程序 会 崩溃 ， 如 图 14-2 所 示 ， 问 题 出 现在 哪里 呢 ? 

仔细 观察 调试 控制 台 ， 在 SignUpVC 类 中 已 经 成 功 注册 了 用 户 ,但 是 到 了 HomeVC 类 中 data 的 值 却 是 nil， 所 以 在 使 用 data! 获 取 用 户头 像 的 时 候 出 现 了 错误 ! 总 而 言 之 ， 当 前 用 户 的 信息 没有 被 正确 的 
获取 。 

产生 崩溃 的 原因 是 这 样 的 : 当 用 户 注册 的 时 候 会 执行 SignUpVC 类 的 signUpBtn_clicked( :) 方 法 。 注 册 成 功 以 后 ， 在 signUplnBackground( :) 方 法 的 闭 包 中 ， 会 通过 UserDefaults 类 存储 相关 信息 到 本 
地 磁盘 。 接 着 再 执行 AppDelegate 类 中 的 login0 方 法 ， 并 根据 情况 显示 指定 的 视图 控制 器 。 从 注册 成 功 到 载 入 当前 的 用 户 数据 ， 这 个 期 间 缺 少 了 一 步 关 键 的 操作 一 一 用 户 登录 ， 因 为 还 没有 执行 登录 的 操 
作 ， 所 以 在 HeaderView 类 中 调用 AVUser.current() 方 法 的 时 人 息 ， 才 获取 不 到 用 户头 像 的 地 址 ， 导 致 闭 包 中 的 data 数 据 是 nil。 


加 Instagram ) Ml Instagram » > HomeVC.swift > K collectionview( ;viewForSupplementaryElementOfKind:;at:) 
» A Rheader.bioLbl.sizeToFit() 


let avaQuery = AVUser.current().object(forKey: "ava") as! AVFile 


avaQuery.getDataInBackground { (data:Data?, error:Error?) in 
.  header.avalmg.image = Ullmage(data: data!) 

} 

return header 


tiO 9o « |) O) Fil: Homev.tcollectionview(UICollectionview, viewFo...dexPath) -> UICollectionReusableView)(closure #1) 


data = (Data?) nil 
| 2016-08-26 18:44:48.469857 Instagram[43657:1707319] [] tcp connection event notify 3 
» 图 error = (Error? (instance type = 0x000060800024766.. | event: TCP CONNECTION EVENT.TLS HANDSHAKE COMPLETE, reason: nw.connection event, 
b FÉ header = (Instagram.HeaderView) Ox00007ffc6bc84adO | should deliver: true 
2016-08-26 18:44:48.470144 Instagram[43657:1707319] [] tcp connection get, statistics 
S: làms/háms since start, TCP: 45ms/184ms since start, TLS: 88ms/180ms since start 


unexpectedly found nil while unwrapping an Optional value 


图 14-2 ”应 用 程序 在 注册 成 功 以 后 前 溃 


了 解 了 产生 问题 的 原因 ， 下 面 我 们 就 解决 这 个 问题 。 


步骤 1 找到 SignUPVC 类 的 signUpBtn_clicked() 方 法 ， 删 除 之 前 的 UserDefaults 语 句 ， 并 将 代码 修改 为 如 下 所 示 : 


UserDefaults.standard.set(user.username, forKey: "username") 
UserDefaults.standard.synchronize|() 
user.signUpInBackground ( (success:Bool, error:Error?) in 
if success { 
print ("用 户 注 册 成 功 !1") 
AVUser.loglInWithUsername (inBackground: user.username, password: user.password, 
block: { (user:AVUser?, error:Error?) in 
if let user = user { 
// 记 住 登录 的 用 户 
UserDefaults.standard.set(user.username, forKey: "username") 
UserDefaults.standard.synchronize|() 


// 从 AppDelegate 类 中 调用 login 方 法 
let appDelegate: AppDelegate = UIApplication.shared.delegate as! AppDelegate 
appDelegate.login() 


Jelse ( 
print (error?.localizedDescription) 
} 
} 


在 新 用 户 注册 成 功 以 后 ， 立 即 执行 loglnWithUsername(inBackground:,password:,block:) 方 法 进行 登录 操作 。 如 果 登 录 成 功 ， 则 利用 UserDefaults 类 将 username 存 储 到 本 地 ， 最 后 调用 
AppDelegate 类 的 login() 方 法 。 


在 loglnWithUsername(inBackground:,password:block:) 方 法 的 闭 包 中 ， 我 们 利用 if let user=user 代 码 进 行 可 选 值 的 判断 。 这 里 使 用 了 一 个 “优雅 ”的 拆 包 方式 ，if 语 句 中 位 于 右边 的 user 是 闭 包 所 
提供 的 参数 (第 一 个 参数 ) ， 当 登录 成 功 后 user 就 是 一 个 AVUser 类 型 的 对 象 ， 而 位 于 左 侧 的 user 则 是 一 个 在 闭 包 中 新 定义 的 常量 。 这 也 就 意味 着 ， 如 果 闭 包 参 数 (可 选 的 AVUser 类 型 的 ) user 在 拆 包 后 不 
为 ni 的 话 ， 则 将 其 赋值 给 一 个 常量 user， 并 且 执 行 if 中 的 代码 。 注 意 ， 在 if 代码 中 引用 到 的 user 都 是 这 个 常量 user。 


步骤 2 ”在 HomeVC 类 的 collectionView( :viewForSupplementaryElementOfKind:at:) 方 法 中 ， 修 改 闭 包 中 的 代码 : 


avaQuery.getDatalnBackground { (data:Data?, error:Error?) in 
if data == nil { 


print (error?.localizedDescription) 
Jelse ( 
header.avalmg.image = UIImage (data: data!) 


修改 后 的 代码 可 以 防止 ava 头 像 的 崩溃 问题 ， 如 果 还 有 其 他 特殊 情况 ， 则 会 显示 默认 的 ppjpg 图 片 。 


14.2 ”在 云 端 创建 天 注 记 录 


当 我 们 在 Instagram 中 创建 了 足够 多 的 用 户 以 后 ， 就 可 以 尝试 创建 他 们 之 间 的 关系 了 。LeanCloud 提 供 了 应 用 内 社交 (又 称 为 事件 流 ) ， 它 包括 用 户 间 关注 (好 友 ) 、 朋 友 圈 (时 间 线 ) 、 状 态 、 互 动 
(ERES) 、 私 信 等 常用 功能 。 


在 Instagram 的 列表 中 可 以 发 现 有 两 张 表 : _Follower 和 _Followee， 它 们 分 别 对 应 着 关注 我 的 人 (粉丝) 和 我 所 关注 的 人 。 其 实 很 简单 ， 只 要 人 在 某 个 需要 添加 关注 的 地 方 添加 下 面 的 代码 就 可 以 了 : 


// 添加 我 关注 的 用 户 
AVUser.current().follow("578581d2165abd0062b7f8bb") { (success:Bool, error: 
Error?) in 
if success { 
// 关注 成 功 后 需要 处 理 的 代码 
Jelse { 


// 关注 失败 后 需要 处 理 的 代码 
} 


在 上 面 的 代码 中 ，follow(_:) 方 法 用 于 为 当前 登录 用 户 添加 所 关注 的 人 。 如 果 当 前 登录 的 用 户 为 A，follow(_:) 访 法 的 参数 是 用 户 B 的 objectld。 则 在 _Followee 表 中 ， 就 会 多 一 行 user 字 段 为 A 的 objectld 
和 followee 字 段 为 B 的 objectld 的 记录 。 我 们 可 以 在 _User 吉 中 查 到 用 户 的 objectld 信 息 ， 如 图 14-3 所 示 ， 或 者 是 在 程序 中 通过 AVUser 对 象 的 id 属性 获取 到 它 。 


objectid STRING 
578581d2165abd0062b7f8bb 
| 57856df7a633bd0066853775 
| 5785624c128fe1006032689e 
| 578569542e958a00642c5db7 
578564088a2b588069426fe1 
|578558da7db2a20063004f0d 
| 57725e3c2e958a00574d237d 
: 57720a1e1532bc005f098233 
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图 14-3 ”从 _Uset 数 据 表 中 获取 注册 用 户 的 objectId 
如 果 此 时 点 开 _Followers 表 的 话 ， 也 会 发 现 多 了 一 行 user 字 段 为 B 的 objectld 和 follower 字 段 为 A 的 objectld 的 记录 ， 代 表 用 户 B 有 一 位 关注 者 为 A 的 用 户 。 
就 目前 的 情况 来 说 ， 项 目 中 还 没有 任何 一 个 合适 的 地 方 运行 添加 关注 的 代码 ， 本 章 的 目的 是 统计 相关 的 数量 信息 ， 所 以 需要 修改 项 目的 现 有 代码 ， 为 其 添加 一 些 测试 用 的 数据 。 


步骤 1 在 AppDelegate 的 login() 方 法 中 ， 注 释 掉 if 语 句 中 的 代码 。 


步骤 2 ”在 LeanCloud 云 端的 _User 表 中 ， 拷 贝 相 关 人 的 objectld 作 为 当前 用 户 的 关注 者 。 


步骤 3 ”添加 下 面 的 代码 到 if 语句 之 中 |: 


N 


// 如 果 之 前 成 功 登 录 过 
AVUser.current().follow("578581d2165abd0062b7f8bb") { (success:Bool, error: 
Error?) in 
if success { 
print ("为 当前 用 户 添 加 关注 者 成 功 !") 
}else { 
print ("为 当前 用 户 添 加 关注 者 失败 !1") 


其 中 ，follow(_:) 方 法 中 的 参数 就 是 上 面 所 说 的 用 户 B 的 objectld， 代 表 当 前 用 户 是 B 的 关注 者 (粉丝 ) 。 
构建 并 运行 项 目 ， 在 用 户 登 录 界 面 中 填写 用 户 的 账号 和 密码 ， 当 成 功 登录 以 后 便 会 执行 follow(_:) 方 法 ， 其 中 objectld 所 代表 的 用 户 便 成 为 当前 用 户 的 关注 者 。 


再 次 复制 另 一 个 用 户 的 objectld 蔡 换 之 前 的 objectld， 运 行 项 目 以 添加 更 多 的 关注 者 。 需 要 注意 的 是 : follow(_:) 方 法 中 不 能 将 当前 登录 用 户 的 objectld 作 为 参数 ， 这 样 会 导致 添加 关注 者 失败 ， 因 为 当 
前 用 户 是 不 能 自己 关注 自己 的 。 


步骤 4 ”查看 LeanCloud 云 端的 Follower 和 Followee 数 据 表 ， 发 现 此 时 已 经 多 个 几 条 记录 ， 如 图 14-4 所 示 。 


口 |objectld STRING ACL ACL * | follower POINTER +| user POINTER 
C) 578627bed342d30057932b42 {"+":{"read":true, "w. [编辑 | 57720a1e1532bc005f098233 57856a4c128fe1006032689e 


CO 578627472e958a006435dcf8 {"+":{"read":true, "w. | 编辑 | 57720a1e1532bc005f098233 57856df7a633bd0066853775 
O 578594bc6be3ff0042b3173c {"+":{"read":true, "w. [编辑 | 57720a1e1532bc005f098233 578581d2165abd0062b7f8bb 


图 14-4 添加 关注 后 _Followet 数 据 表 所 增加 的 记录 


接 下 来 ， 我 们 需要 让 其 他 一 些 用 户 关注 用 户 A， 所 以 复制 用 户 A 的 objectld， 将 其 作为 follow(_:) 方 法 的 参数 ， 并 重新 运行 项 目 。 在 登录 的 时 候 ， 请 用 除 用 户 A 以 外 的 其 他 账号 登录 ， 这 样 就 添加 了 用 户 A 
的 关注 者 。 


14.8 ”获取 用 户 相 天 数据 信息 


在 用 于 测试 的 数据 准备 好 以 后 ， 我 们 就 可 以 获取 用 户 的 相关 数据 了 。 


步骤 1 在 AppDelegate 类 中 ， 将 添加 关注 者 的 临时 代码 注释 掉 ， 恢 复 之 前 原 有 的 代码 。 


// 如 果 之 前 成 功 登 录 过 

if username != nil { 

let storyboard: UlStoryboard = UIStoryboard (name: "Main", bundle: nil) 

let myTabBar = storyboard.instantiateViewController (withIdentifier: "tabBar") as! UITabBarController 
window?.rootViewController - myTabBar 

/* 注释 掉 这 段 临 时 代码 

AVUser.current().follow("57720al1e1532bc005f£098233") { (success:Bool, error: 

Error?) in 

if success { 
print (" 为 当前 用 户 添加 关注 者 成 功 !") 

Jelse ( 
print ("为 当前 用 户 添加 关注 者 失败 1") 


步骤 2 在 HomeVC 类 collectionView( :,viewForSupplementaryElementOfKind:,at:) 方 法 中 return 语 句 的 上 面 ， 添 加 下 面 的 代码 : 


let currentUser: AVUser = AVUser.current () 
let postsQuery = AVQuery(className: "Posts") 
postsQuery?.whereKey ("username", equalTo: currentUser.username) 
postsQuery?.countObjectsInBackground(( (count:Int, error:Error?) in 
if error == nil ( 

header.posts.text = String (count) 

} 
}) 


在 上 面 的 代码 中 ， 首 先 初始 化 一 个 AVQuery 类 型 的 对 象 ， 我们 用 它 来 对 云端 的 Posts 表 进行 数据 查询 ， 所 以 className 参 数 设 置 为 Posts。 然 后 通过 whereKey 方 法 设置 查询 条 件 一 一 username 字 上段 为 
当前 用 户 的 username 的 所 有 记录 。 最 后 通过 AVQuery 的 countObjectsiInBackground() 方 法 ， 获 取 符 合 条 件 的 记录 数量 。 当 查询 结束 以 后 ， 我 们 可 以 通过 闭 包 提 供 的 参数 count 获 取 到 记录 数量 ,或 者 是 发 


生 错 误 的 错误 信息 。 


Qaz 在 闭 包 中 我 们 会 通过 header.posts.text 显 示 当 前 用 户 的 帖子 总 数 ， 那 为 什么 在 这 里 直接 用 header， 而 不 像 之 前 章节 中 使 用 self.headet 呢 ?这 与 生存 期 有 关 ， 我 们 是 在 当前 方法 中 通过 
dequeueReusableSupplementaryView(ofKind:,withReuseldentifier:,for:) 方 法 创建 的 header， 因 此 这 个 headet 并 不 是 当前 类 (HomeVC 类 ) 的 一 个 属性 ， 所 以 就 不 能 加 self.。 


步骤 3 ”在 Posts 的 查询 语句 下 继续 添加 代码 : 


let followersQuery = AVQuery (className: " Follower") 
followersQuery?.whereKey ("user", equalTo: currentUser) 
followersQuery?.countObjectsInBackground(( (count:Int, error:Error?) in 
if error == nil ( 

header.followers.text = String (count) 


与 上 面 的 代码 类 似 ， 只 不 过 这 里 载 入 的 是 Follower 表 ，whereKey(_:,equalTo:) 方 法 的 equalTo 参 数 是 当前 的 用 户 ， 通 过 这 段 代 码 我 们 可 以 查询 出 关注 当前 用 户 的 总 人 数 。 


步骤 4 ”继续 添加 下 面 的 代码 ， 查 询 出 当前 用 户 所 关注 的 总 人 数 。 


let followeesQuery = AVQuery (className: " Followee") 


followeesQuery?.whereKey ("user", equalTo: currentUser) 

followeesQuery?.countObjectsInBackground(( (count:Int, error:Error?) in 
if error == nil { 
header.followings.text = String (count) 


构建 并 运行 项 目 ， 在 HomeVC 界 面 中 可 以 看 到 帖子 、 关 注 者 和 关注 的 对 应 数据 ， 如 图 14-5 所 示 。 
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图 14-5 Headet 中 显示 当前 用 户 的 统计 数据 


到 目前 为 止 ， HomeVC 类 的 collectionView( :view-ForSsupplementaryElementOfKind:,at:) 方 法 所 要 完成 的 任务 比较 多 ， 让 我 们 划分 一 下 它 的 功能 ， 这 样 就 清楚 它 都 干 了 什么 。 


首先 是 从 集合 视图 的 可 复 用 队列 中 获取 到 HeaderView 对 象 ， 然 后 再 从 云端 获取 用 户 的 相关 数据 (头像 、 用 户 名 、bio 等 ) ， 最 后 是 本 章 所 解决 的 三 个 重要 数量 信息 (帖子 总 数 、 关 注 者 和 关注 ) 。 
本 章 小 结 


在 本 章 中 ， 我 们 首先 修改 了 一 个 Bug， 也 就 是 在 新 用 户 注册 成 功 以 后 的 闭 包 中 还 要 进行 用 户 登 录 的 操作 ， 否 则 在 之 后 的 操作 中 就 会 遇 到 问题 。 另 外 ， 我 们 还 通过 AVUser 类 的 follow(_:) 方 法 ， 为 当前 用 户 
添加 关注 。 需 要 注意 关注 者 (粉丝 ) 和 关注 的 区 别 ， 即 谁 天 注 谁 的 问题 ， 如 果 逻 辑 天 系 不 清楚 的 话 则 会 造成 很 严重 的 错误 。 


第 15 草 “与 统计 数据 之 间 的 交互 


本 章 我 们 需要 实现 当 用 户 单 击 相关 统计 数据 后 的 代码 。 例 如 ， 当 用 户 单 击 关 注 者 或 天 注 的 数量 Label 之 后 ， 应 该 跳 转 到 一 个 表格 视图 ， 显 示 具 体 的 用 户 数据 信息 。 


Proxy Error 


The proxy server received an invalid response from an upstream server. 
The proxy server could not handle the request GET /resource/readBook. 


Reason: Error reading from remote server 


15.2 ”创建 Outlet 关 联 


接 下 来 ， 我 们 要 为 表格 视图 中 的 单元 格 和 FollowersCell 类 建立 必要 的 Outlet 关 联 。 
步骤 1 将 Xcode 切换 到 助手 编辑 器 模式 ， 确 保 下 面 的 窗口 打开 的 是 FollowersCell.swift 文 件 。 


步骤 2 为 Image View，Label 和 Button 创 建 3 个 Outlet 关 联 ，Name 分 别 设置 为 : avalmg、usernameLbl 和 followBtn， 如 图 15-4 所 示 。 


下 面 ， 需 要 做 的 事情 是 当 用 户 单 击 HomeVC 界 面 的 关注 者 数 和 关注 数 Label 时 ， 跳 转 到 FollowersVC 控 制 器 ， 以 显示 具体 的 关注 人 员 信 息 。 因 为 不 管 是 关注 者 还 是 关注 ， 所 显示 的 界面 是 完全 一 样 ， 所 以 
统一 用 FollowersVC 控 制 器 。 


步骤 3 打开 FollowersVC.swift 文 件 ， 为 该 类 声明 两 个 字符 串 类 型 的 属性 : 


class FollowersVC: UITableViewController { 
var show = String() 
var user = String() 


show 用 于 在 导航 栏 标 题 处 显示 内 容 ，user 用 于 在 返回 按钮 上 显示 用 户 名 称 。 


步骤 4 再 次 回 到 我 们 非常 熟悉 的 HomeVC 类 的 collectionView( :,viewForSupplementaryElementOfKind:,at:) 方 法 ， 在 returni 语 句 的 上 方 添加 处 理 单 击 统计 数据 Label 的 交互 代码 : 


> [E] Reset PasswordVC Scene 
> E Tab Bar Controller Scene 


> E HomevC Scene 


v E FollowersVC Scene 
v Ó FollowersvC | TTE G 
w |_| Table View : D 


v [53 Cell 


v [Conten 


四 View as: iPhone 6s (wC nR) 


€ > [I Manual) Bi Instagram ) Æ Instagram ) Bl FollowersCell.swift ) No Selection 
import UIKit 
class FollowersCell: UlTableViewCell ( 


QIBOutlet weak var avalmg: UllmageView! 
QIBOutlet weak var usernameLbl: UlLabel! 
QIBOutlet weak var followBtn: UIButton! 


override func awakeFromNib() 1 
super,.awakeFromNib() 
//| Initialization code 


) 


图 15-4 ”在 单元 格 中 创建 Outlet 关 联 


// STEP 3. 实现 单 击 手势 


// 单 击 帖子 数 
let postsTap = UITapGestureRecognizer (target: self, action: #selector (posts- 
Tap( :))) 


postsTap.numberOfTapsRequired = 1 
header.posts.isUserInteractionEnabled = true 
header.posts.addGestureRecognizer (postsTap) 


通过 UITapGestureRecognizer 创 建 了 一 个 单 击 手势 ， 设 置 当 发 生 单 击 事件 后 调用 postsTap(_:) 方 法 。 接 下 来 是 设置 单 击 的 次 数 为 1 次 。Label 在 默认 的 情况 下 与 Image View 一 样 是 不 允许 交互 的 ， 所 以 
需要 使 用 isUserlnteractionEnabled 将 交互 打开 ， 最 后 将 postsTap 手 势 添 加 到 Label 控 件 上 。 


步骤 5 ”继续 添加 下 面 的 代码 ， 为 另外 两 个 Label 添 加 单 击 手势 响应 : 


// 单 击 关 注 者 数 

let followersTap = UlTapGestureRecognizer(target: self, action: #selector (followers- 
Tap( :))) 

followersTap.numberOfTapsRequired = 1 


header.followers.isUserlnteractionEnabled = true 
header.followers.addGestureRecognizer (followersTap) 


// 单 击 关注 数 

let followingsTap = UITapGestureRecognizer (target: self, action: #selector (followings- 
Tap( :))) 

followingsTap.numberOfTapsRequired = 1 


header.followings.isUserInteractionEnabled - true 
header.followings.addGestureRecognizer (followingsTap) 


步骤 6 在 HomeVC 类 中 添加 三 个 新 的 方法 ， 用 以 响应 之 前 三 个 单 击 方法 的 调用 。 


// 单 击 帖子 数 后 调用 的 方法 
func postsTap( recognizer:UITapGestureRecognizer) { } 
// 单 击 关 注 者 数 后 调用 的 方法 
func followersTap(  recognizer:UITapGestureRecognizer) ( } 
// 单 击 关注 数 后 调用 的 方法 


func followingsTap( recognizer:UITapGestureRecognizer) { ] 


15.3 ”统计 数据 被 单 击 后 的 实现 代码 


在 Instagram 应 用 中 ， 当 用 户 单 击 帖子 数 以 后 ， 集 合 视 图 会 立即 向 上 滑动 到 照片 列表 部 分 ， 如 图 15-5 所 示 。 
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步骤 1 在 postsTap(_:) 方 法 中 添加 下 面 的 代码 : 


func postsTap( recognizer:UITapGestureRecognizer) { 

if !picArray.isEmpty { 
let index = IndexPath(item: 0, section: 0) 
self.collectionView?.scrollToItem(at: index, at: UlCollectionViewScrollPosi- 


tion.top, animated: true) 


) 


在 上 面 的 代码 中 ， 首 先 判断 picArray 数 组 是 否 有 值 ， 如 果 有 ， 则 让 集合 视图 滚动 到 视图 的 第 一 个 section 的 第 一 个 item (单元 格 ) E. 


UlCollectionView 的 scrollToltem(at'at:animated:) 方 法 用 于 显示 指定 位 置 的 单元 格 。 第 一 个 参数 是 IndexPath 类 型 ， 我 们 指定 了 第 一 个 section 的 第 一 个 item。 第 二 个 参数 是 UICollection- 
ViewscrollPosition 类 型 的 结构 体 ， 它 指明 了 在 滚动 结束 后 item 的 停留 位 置 。 它 包含 以 下 这 些 选 项 : 


: top: 滚动 停留 在 item 的 顶部 。 

: centeredVertically: 滚动 停留 在 item 的 垂直 中 央 位 置 。 

: bottom: 滚动 停留 在 item 的 底部 。 

left: 滚动 停留 在 item 的 左 侧 。 

: centeredHorizontally: 滚动 停留 在 item 的 水 平 中 央 位 置 。 

.fight: 滚动 停留 在 item 的 右 便 。 

其 中 ， 前 三 个 选项 用 于 处 理 垂 直 滚 动 的 集合 视图 ， 后 三 个 则 用 于 处 理 水 平 滚动 的 集合 视图 。 
为 了 能 够 测试 集合 视图 的 滚动 效果 ， 我 们 需要 手动 修改 两 个 方法 中 的 代码 。 


步骤 2 在 collectionView( :numberoOfltemslnSection:) 方 法 中 修改 return 语 句 。 


override func collectionView(  collectionView: UICollectionView, numberOfItems- 
InSection section: Int) -> Int ( 

// 返回 20 个 单元 格 

return picArray.count * 20 


) 


步骤 3 在 collectionView( :cellForltemAt:) 方 法 中 ， 将 picArray[indexPath.row] 修 改 为 indexPath[0]。 


// 从 picArray 数 组 中 获取 图 片 
picArray[0].getDataInBackground { (data:Data?, error:Error?) in 


构建 并 运行 项 目 ， 当 单 击 帖子 数 的 时 候 ， 集 合 视图 会 滚动 到 理想 的 位 置 ， 如 图 15-6 所 示 。 
继续 实现 另外 两 个 单 击 操作 后 的 代码 。 


步骤 4 在 followersTap(_:) 方 法 中 ， 添 加 下 面 的 代码 : 


func followersTap(  recognizer:UITapGestureRecognizer) { 


// 从 故事 板 载 入 FolljowersVC 的 视图 
let followers = self.storyboard?.instantiateViewController (withlIdentifier: "Follo- 


wersVC") as! FollowersVC 
followers.user = AVUser.current ().username 

followers.show = "X iz 者 " 

self.navigationController?.pushViewController (followers, 


) 


animated: true) 
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图 15-6 ”测试 单 击 帖子 数 的 事件 


在 该 方法 中 ， 首 先 载 入 故事 板 中 的 FollowersVC 视 图 控制 器 ， 因 为 instantiateViewCo-ntroller(withldentifier:) 方 法 的 返回 值 是 UlIViewController 类 型 ， 所 以 需要 使 用 as! 将 其 转换 为 FollowersVC 类 
型 。 然 后 为 FollowersVC 的 user 和 show 属 性 赋值 ， 这 两 个 属性 用 于 在 FollowersVC 中 显示 用 户 名 和 标题 内 容 。 最 后 ， 通 过 导航 控制 器 将 FollowersVC 的 视图 推送 到 屏幕 上 。 


步骤 5 在 followingsTap(_:) 方 法 中 ， 添 加 下 面 的 代码 : 


func followingsTap(  recognizer:UlTapGestureRecognizer) { 


// 从 故事 板 载 入 FollowersVC 的 视图 
let followings = self.storyboard?.instantiateViewController (withlIdentifier: "Follow- 
ersVC") as! FollowersVC 

followings.user = AVUser.current ().username 
followings.show = "X iE" 
self.navigationController?.pushViewController (1 


followings, animated: true) 


) 


与 之 前 方法 的 代码 类 似 ， 只 是 这 里 所 创建 的 控制 器 用 于 显示 当前 用 户 所 关注 的 人 员 列 表 。 


还 记得 之 前 在 故事 板 中 将 FollowersVC 控 制 器 的 Storyboard 1D 设 置 为 FollowersVC 吗 ? 因为 只 有 这 样 ， 我 们 才能 通过 instantiateViewController(withldentifier) 方 法 成 功 获取 到 指定 ID 的 视图 控制 器 


对 象 。 


构建 并 运行 项 目 ， 不 管 是 单 击 关注 者 还 是 关注 的 数字 Label， 导 航 控 制 器 都 会 推送 出 一 个 全 新 的 控制 器 到 屏幕 上 ， 这 个 控制 器 就 是 FollowersVC 控 制 器 ， 只 是 现在 这 个 控制 器 还 没有 任何 内 容 。 


在 本 章 的 最 后 ， 还 要 为 FollowersVC 的 导航 栏 添加 必要 的 显示 信息 。 


步骤 6 项目 导 航 中 打开 FollowersVC.swift 文 件 ， 在 viewDidLoad() 方 法 中 添加 下 面 的 代码 : 


override func viewDidLoad() { 
super.viewDidLoad() 
self.navigationlItem.title = show 


e 


构建 并 运行 项 目 ， 如 果 此 时 单 击 关 注 者 或 天 注 数字 的 话 ， 在 新 控制 器 视图 的 导航 栏 上 会 出 现 相 应 的 信息 ， 如 图 15-7 所 示 。 
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本 章 小 结 


在 本 章 中 我 们 创建 了 全 新 的 表格 视图 控制 器 ， 用 于 显示 关注 者 (粉丝 ) 和 关注 的 人 员 信 息 。 因 为 只 是 需要 显示 的 数据 信息 不 同 ， 所 以 这 里 使 用 了 同一 个 控制 器 一 一 FollowersVC。 这 是 在 应 用 程序 开发 


时 经 常会 用 到 的 方法 ， 不 仅 节省 了 程序 员 的 代码 量 ， 还 提高 了 程序 的 可 读 性 及 性 能 。 


第 16 章 “从 云端 载 入 关注 人 员 信 息 


本 章 我 们 将 会 从 LeanCloud 云 端 下 载 相关 人 员 信 息 ， 并 将 这 些 信息 显示 到 FollowersVC 控 制 器 的 视图 之 中 。 


16.1 ”从 云端 获取 关注 人 员 信 息 


步骤 1 在 FollowersVC 类 中 添加 一 个 属性 : 


class FollowersVC: UITableViewController { 
var show = String() 
var user = String() 
var followerArray = [AVUser]!() 


该 属性 用 于 存储 从 云端 下 载 的 关注 人 信息 ， 是 AVUser 类 型 的 数组 。 


步骤 2 在 FollowersVC 类 中 新 建 一 个 方法 : 


func loadFollowers() { 
AVUser.current().getFollowers { (followers:[Any]?, error:Error?) in 
if error == nil && followers !- nil ( 
self.followerArray = followers! as! [AVUser] 
Jelse ( 
print (error?.localizedDescription) 
} 
) 
} 


通过 AVUser 类 的 getFollowers(_:) 方 法 ， 可 以 从 LeanCloud 云 端 获取 当前 用 户 的 关注 者 信息 。 当 获取 操作 完成 以 后 ， 会 通过 闭 包 的 形式 传 回来 。 
数 followers 的 值 赋值 给 followerArray 数 组 。 


之 所 以 赋值 时 在 followers 的 后 面 添加 “!” ， 是 因为 followerArray 属 性 是 非 可 选 的 ， 在 赋值 的 时 候 必须 对 followers 强 制 拆 包 。 


步骤 3 ”在 FollowersVC 类 中 再 新 建 一 个 方法 : 


func loadFollowings() { 
AVUser.current().getFollowees ( (followings:[Any]?, error:Error?) in 
if error == nil && followings !- nil ( 
self.followerArray = followings! as! [AVUser] 
Jelse ( 
print (error?.localizedDescription) 
) 
} 
} 


与 之 前 loadFollowers(_:) 方 法 的 代码 类 似 ， 只 不 过 这 里 调用 的 是 getFollowees(_:) 方 法 ， 获 取 的 是 当前 用 户 所 关注 的 人 员 信 息 。 


步骤 4 修改 tableView( :numberOfRowslnsection:) 方 法 的 返回 值 。 


override func tableView(  tableView: UlTableView, numberOfRowsInSection section: Int) -> Int { 
return followerArray.count 


[a 


步骤 5 ”删除 numberOfSsections(in:) 方 法 ， 默 认 情况 下 表格 视图 会 显示 1 个 Section。 


如 果 error 为 空 ， 并 且 followers 不 为 空 的 话 ， 则 将 闭 包 参 


步骤 6 在 viewDidLoad() 方 法 中 ， 添 加 下 面 的 代码 : 


override func viewDidLoad() { 
super.viewDidLoad() 
self.navigationlItem.title = show 

if show == "X 注 Xd" { 

loadFollowers () 

Jelse { 

loadFollowings () 


} 
} 


在 该 方法 中 ， 将 会 根据 show 的 字符 串 内 容 从 LeanCloud 云 端 获 取 相 应 的 人 员 数 据 。 


16.2 ”创建 表格 视图 的 单元 格 


当成 功 获取 到 关注 人 员 数 据 信息 以 后 ， 就 可 以 创建 相关 的 单元 格 对 象 了 。 


步骤 1 找到 FollowersVC 类 的 tableView( :cellForRowAt:) 方 法 ， 添 加 下 面 的 代码 : 


override func tableView(  tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { 
let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath) as! FollowersCell 
cell.usernamelbl.text = followerArray[indexPath.row].username 
let ava = followerArray[indexPath.row].object(forKey: "ava") as! AVFile 
return cell 


} 


在 该 方法 中 ， 首 先 通过 tableView 的 可 复 用 队列 获取 到 单元 格 对 象 ， 并 且 将 其 转换 为 FollowersCell 类 型 。 然 后 利用 indexPath.row 获 取 followerArray 数 组 中 对 应 的 AVUser 对 象 ， 并 将 AVUser 对 象 中 的 
username 赋 值 给 单元 格 的 Label。 最 后 ， 通 过 AVUser 的 object(forKey:) 方 法 获取 到 用 户 的 头像 信息 ， 接 下 来 我 们 要 利用 这 个 AVFile 对 象 ， 从 LeanCloud 云 端 下 载 对 应 的 图 像 数据 。 


步骤 2 flet ava 语 句 的 下 面 继续 添加 代码 : 


ava.getDatalnBackground(( (data:Data?, error:Error?) in 
if error == nil { 
cell.avalmg.image = UIImage (data: data!) 
Jelse ( 


print (error?.localizedDescription) 
} 
}) 


通过 AVUser 的 getDatalnBackground(_;) 方 法 从 LeanCloud 云 端 下 载 AVFile 类 型 的 数据 ， 如 果 没 有 错误 ， 则 将 该 数据 初始 化 为 Ullmage 类 型 的 对 象 ， 并 将 其 赋值 给 单元 格 的 avalmg 的 image 属 性 。 
如 果 此 时 构建 并 运行 项 目 ， 在 表格 视图 中 并 不 会 出 现任 何 真正 有 意义 的 单元 格 数据 ， 这 与 之 前 所 查询 到 的 统计 数据 是 有 出 入 的 ， 为 什么 呢 ? 


我 们 可 以 仔细 想 想 FollowersVC 控 制 器 的 执行 流程 : 首先 ， 控 制 器 会 执行 viewDidLoad() 方 法 ， 在 该 方法 中 程序 会 根据 show 属 性 来 判断 执行 loadFollowers() 方 法 还 是 loadFollowings() 方 法 。 不 管 是 这 
两 个 方法 中 的 哪 一 个 ， 都 需要 在 后 台 线 程 中 获取 相关 的 AVUser 对 象 的 信息 。 注 意 ， 此 时 的 这 个 操作 是 在 后 台 线 程 中 运行 的 。 因 此 ， 主 线程 会 继续 向 下 运行 代码 ， 表 格 视图 会 通过 协议 方法 
tableView(_:numberOfRowslnsection:) 从 控制 器 中 获取 要 显示 的 单元 格 数量 。 请 再 次 注意 ， 当 程序 执行 到 这 一 步 的 时 候 ，loadFollowers() 或 loadFollowings() 方 法 还 在 后 台 运行 ， 还 没有 从 云端 获取 到 关 
注 人 员 的 信息 ， 因 此 followerArray 数 组 的 元 素 个 数 此 时 还 是 0， 所 以 不 管 之 后 followerArray 数 组 获得 了 多 少数 据 ， 都 不 会 执行 tableView(_:,cellForRowAt:) 来 创建 单元 格 ， 也 就 无 法 显示 相应 的 数据 了 。 


其 实 ， 解 决 这 个 问题 的 方法 很 简单 ， 利 用 tableView 的 reloadData() 方 法 即 可 。 


步骤 3 在 loadFollowers0 和 loadFollowings() 方 法 中 ， 在 followerArray 数 组 的 赋值 语句 的 下 面 添加 对 tableView 的 reloadData() 方 法 调用 。 


func loadFollowers() { 
AVUser.current().getFollowers ( (followers:[Any]?, error:Error?) in 
if error == nil && followers !- nil ( 
self.followerArray = followers! as! [AVUser] 
// 刷新 表格 视图 
self.tableView.reloadData () 
Jelse ( 
print (error?.localizedDescription) 
} 
} 
} 
func loadFollowings() { 
AVUser.current().getFollowees ( (followings:[Any]?, error:Error?) in 
if error == nil && followings !- nil ( 
self.followerArray = followings! as! [AVUser] 
// 刷新 表格 视图 
self.tableView.reloadData () 
Jelse ( 
print (error?.localizedDescription) 
} 
} 
} 


在 调用 了 reloadData() 方 法 以 后 ， 表 格 视图 会 刷新 单元 格 ， 此 时 followerArray 数 组 中 的 数据 已 经 准备 完毕 ， 可 以 正常 显示 所 需 数据 ， 如 图 16-1 所 示 。 
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图 16-1 ” FollowetsVC 中 显示 的 关注 人 员 信 息 


16.3 ”设置 天 注 按钮 的 状态 


当 FollowersVC 显 示 关 注 人 员 信息 的 时 候 ， 每 个 单元 格 右 侧 的 关注 按钮 状态 可 能 是 不 同 的 。 这 里 列 出 的 应 该 都 是 关注 当前 用 户 的 人 ， 但 是 不 见得 是 我 所 关注 的 人 ， 这 样 就 会 出 现 两 种 不 同 的 状态 : 我 已 


经 关注 的 和 我 没有 关注 的 ， 对 于 这 两 种 状态 ， 应 该 从 按钮 的 Title 和 外 观 上 加 以 区 分 


步骤 1 找到 FollowersVC 类 的 tableView( :cellForRowAt:) 方 法 ， 在 return 语 句 的 上 方 添加 下 面 的 代码 : 


// 利用 按钮 外 观 区 分 当前 用 户 关注 或 未 关注 状态 

let query = followerArray[indexPath.row].followeeQuery () 

query?.whereKey("user", equalTo: AVUser.current ()) 

query?.whereKey("followee", equalTo: followerArray [indexPath. row]) 

query?.countObjectsInBackground(( (count:Int, error:Error?) in 
MEELEST LU 

)) 


在 这 段 代 码 中 ， 利 用 AVUser 的 followeeQuery() 方 法 获取 到 云端 _Followee 表 的 数据 查询 类 。 然 后 查询 在 该 表 中 user 字 段 等 于 当前 用 户 (用 A 代表 ) 而 followee 字 段 等 于 指定 单元 格 的 人 员 对 象 (ABE 


表 


— 


的 记录 ， 即 我 们 要 查询 followee 表 中 是 否 存 在 当前 用 户 A 关注 指定 单元 格 中 的 人 员 B 的 记录 。 接 下 来 执行 CountObjectsiInBackground( :) 方 法 ， 根 据 返 回 的 数量 设置 按钮 的 风格 。 


步骤 2 ”在 countObjectslnBackground( :) 方 法 的 闭 包 中 添加 下 面 的 代码 : 


if error == nil ( 
if count == 0 ( 
cell.followBtn.setTitle("X ;E£", for: .normal) 
cell.followBtn.backgroundColor = .lightGray 
Jelse ( 
cell.followBtn.setTitle("./ E X€i£", for: .normal) 
cell.followBtn.backgroundColor - .green 


如 果 没 有 记录 (count 为 0) 则 代表 A 没 有 关注 过 B， 需 要 显示 关注 按钮 。 如 果 有 记录 (count 不 为 0) 则 代表 A 已 经 关注 了 B， 需 要 显示 V 已 关注 按钮 。 
构建 并 运行 项 目 ， 根 据 实际 情况 可 以 看 到 相应 的 按钮 状态 ， 如 图 16-2 所 示 。 


从 图 16-2 中 我 们 发 现 ，lele 是 当前 用 户 的 关注 者 ， 同 时 当前 用 户 也 关注 了 lele。 


单 击 关注 Label， 在 列 出 的 单元 格 中 ， 所 有 的 按钮 都 是 已 关注 ， 这 是 非常 正常 的 表现 ， 如 图 16-3 所 示 。 因 为 此 时 表格 视图 列 出 的 就 是 所 有 当前 用 户 关注 的 人 。 这 些 按钮 存在 的 唯一 原因 就 是 ， 为 当前 用 户 


取消 关注 提供 途径 。 


步骤 3 ”在 新 添加 的 代码 下 方 继续 添加 代码 : 


// 为 当前 用 户 隐藏 关注 按钮 


if cell.usernameLbl.text == AVUser.current().username { 
cell.followBtn.isHidden = true 


) 


V 已 关注 


shanshan 


图 16-2 ”显示 关注 者 的 关注 状态 


图 16-3 ”显示 关注 人 员 的 关注 状态 


为 什么 要 添加 这 段 代 码 呢 ? Instagram 程 序 在 列 出 相关 人 员 (假设 是 A) 信息 以 后 是 可 以 单 击 该 人 员 的 ， 在 单 击 A 人 员 单 元 格 以 后 屏幕 就 会 推出 A 人 员 的 个 人 主页 ， 进 而 可 以 单 击 A 人 员 的 统计 数据 ， 这 样 
就 可 以 进入 到 A 人 员 的 关注 者 列表 ， 里 面 有 可 能 就 会 出 现 当前 用 户 的 信息 ， 并 且 这 个 关注 按钮 也 存在 。 


可 以 想象 ， 在 _Followee 表 中 根本 不 可 能 存在 followee 和 user 都 为 同一 个 人 的 记录 ， 所 以 在 单 击 这 个 按钮 以 后 可 能 会 导致 程序 混乱 ， 我 们 一 定 要 避免 这 个 Bug 出 现 。 
为 了 让 程序 更 完美 ， 在 下 面 几 个 地 方 做 下 小 修改 : 
步骤 4 故事 板 中 删除 单元 格 中 followBtn 按 钮 的 Title 内 容 ， 因 为 在 刷新 单元 格 的 时 候 会 直接 为 其 赋值 。 


步骤 5 在 故事 板 中 将 followBtn 按 钮 的 Text Color 设 置 为 White Color。 从 大 纲 视 图 中 选中 Table View 的 Cell， 然 后 在 Attributes Inspector 中 将 Selection 设 置 为 None， 如 图 16-4 所 示 。 这 样 ， 当 用 户 
单 击 单元 格 的 时 候 就 不 会 出 现 高 亮 显 示 了 。 
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图 16-4 设置 单元 格 的 Selection 属 性 为 None 


步骤 6 在 FollowersCell 类 中 的 awakeFromNib() 方 法 里 面 ， 添 加 下 面 两 行 代码 : 


override func awakeFromNib() { 
super.awakeFromNib() 
// 将 头像 制作 成 圆 形 
avalmg.layer.cornerRadius = avalmg.frame.width / 2 
avalmg.clipsToBounds = true 


) 


构建 并 运行 项 目 ， 效 果 如 图 16-5 所 示 。 
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图 16-5 “将 头像 设置 为 圆 形 


16.4 添加 关注 和 取消 关注 


接 下 来 ， 我 们 需要 处 理 用 户 在 单 击 关注 按钮 后 的 实现 代码 。 
步骤 1 将 Xcode 切换 到 助手 编辑 器 模式 ， 确 保 故 事 板 中 选中 的 是 FollowersVC 的 单元 格 ， 下 面 的 窗口 打开 的 是 FollowersCell.swift 文 件 。 


步骤 2 为 单元 格 中 的 Button 创 建 Action 关 联 ，Name 设 置 为 followBtn clicked, 


// 单 击 后 关注 或 取消 关注 
QIBAction func followBtn clicked( sender: AnyObject) { } 


步骤 3 在 followBtn_clicked( :) 方 法 中 添加 下 面 的 代码 : 


QIBAction func followBtn clicked( sender: AnyObject) { 


let title = followBtn.title(for: .normal) 
if title = "X iz" { 
guard user !- nil else { return } 


AVUser.current().follow(user.objectId, andCallback: { (success:Bool, error: Error?) in 
if success { 
self.followBtn.setTitle("4/ C Xi£", for: .normal) 


self. 
Jelse ( 
print (error?.localizedDescription) 
} 
}) 


ollowBtn.backgroundColor = .green 


} 


在 该 方法 中 ， 首 先 会 获取 单元 格 中 当前 按钮 的 title， 如 果 当 前 的 title 是 关注 ， 则 意味 着 当前 用 户 欲 关注 单元 格 中 显示 的 人 ， 因 此 在 if 语句 中 调用 follow() 方 法 。 注 意 ，follow() 方 法 的 第 一 个 参数 是 被 关注 
人 的 objectld， 当 前 还 没有 对 该 属性 进行 定义 ， 所 以 会 出 现 语法 错误 。 当 关注 在 云端 设置 成 功 以 后 ， 我 们 还 需要 修改 按钮 的 状态 为 已 关注 。 


步骤 4 ”在 FollowersCell 中 添加 一 个 AVUser 类 型 的 user 属 性 。 


class FollowersCell: UITableViewCell { 
QIBOutlet weak var followBtn: UIButton! 
var user: AVUser! 


步骤 5 在 FollowersVC 的 tableView( ;cellEForRowAt)75;XFR;ABH—(31V83 ( 见 加 粗 代码 ) : 


override func tableView( tableView: UlTableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { 


// 将 关注 人 对 象 传递 给 FollowersCell 对 象 

cell.user = followerArray [indexPath.row] 
// 为 当前 用 户 隐 藏 关注 按钮 
if cell.usernamelbl.text == AVUser.current().username { 


cell.followBtn.isHidden = true 


} 


return cel] 


kyd 


步骤 6 回 到 FollowersCell 类 ， 在 followBtn_clicked( :) 方 法 中 的 i 放 语句 下 面 添加 else 语 句 代 码 : 
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}else { 

guard user !- nil else { return } 

AVUser.current().unfollow(user.objectlId, andCallback: { (success:Bool, error: Error?) in 
if success { 


self.followBtn.setTitle("X j£", for: .normal) 
self.followBtn.backgroundColor = .lightGray 
Jelse ( 


print (error?.localizedDescription) 
} 
}) 
} 


else 语 句 中 的 代码 与 之 前 if 语 句 中 的 类 似 ， 只 不 过 这 里 是 取消 对 单元 格 中 人 员 的 关注 ， 并 且 修 改 按钮 的 外 观 。 


构建 并 运行 项 目 ， 不 管 是 关注 者 还 是 关注 的 人 员 列 表 ， 当 单 击 按钮 以 后 会 有 相应 的 状态 变化 。 例 如 当前 的 这 个 实例 ， 在 关注 者 人 员 列 表 中 关注 了 xiaomei， 此 时 xiaomei 的 状态 变 为 了 Vv 已 关注 ， 进 入 到 
关注 人 员 列 表 ， 可 以 看 到 xiaomei 已 经 在 列表 之 中 了 ， 如 图 16-6 所 示 。 


运营 商 令 下 午 3:00 运营 商 e 
€ LIUMING 关注 者 《 LIUMING 


T ss C n 


— tu — 


xiaomei 


图 16-6 ” 单 击 按 钮 后 的 关注 状态 


本 章 小 结 


在 本 章 中 ， 我 们 利用 AVUser 类 提供 的 getFollowers()、getFollowees() 两 个 方法 查询 关注 者 和 关注 人 员 的 数量 及 相关 信息 。 我 们 需要 始终 保持 清楚 的 一 点 就 是 : getFollowers() 或 者 与 Followers 有 关 的 
操作 都 是 针对 关注 者 的 ; getFollowees() 或 者 与 Followees 有 关 的 操作 都 是 针对 关注 的 。 前 者 是 关注 当前 用 户 人 ， 后 者 是 当前 用 户 关 注 的 人 。 


第 17 草 创建 访客 的 相关 功能 


在 真正 的 Instagram 应 用 程序 中 ， 当 前 用 户 可 以 浏览 其 他 用 户 (访客 ) 的 个 人 主页 ， 如 图 17-1 所 示 。 在 接 下 来 的 两 章 中 我 们 会 实现 这 个 功能 。 
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图 17-1 Instagram 中 浏览 访客 的 主页 


17.1 在 故事 板 中 创建 用 户 界面 


EX, 访客 个 人 主页 的 用 户 界面 与 当前 用 户 的 个 人 主页 界面 (HomeVC 的 视图 ) 非常 类 似 ， 只 不 过 没有 编辑 个 人 主页 的 按钮 ， 取 而 代 之 的 是 关注 或 V 已 关注 的 交互 按钮 。 


步骤 1 在 HomeVC 类 的 viewDidLoad() 方 法 中 ， 添 加 下 面 一 行 代 码 : 


override func viewDidLoad() { 
super.viewDidLoad() 
// 设置 集合 视图 在 垂直 方向 上 有 反弹 的 效果 
self.collectionView?.alwaysBounceVertical = true 


通过 将 集合 视图 的 alwaysBounceVertical 属 性 设置 为 true， 让 集合 视图 在 垂直 方向 上 有 上 反弹 的 效果 ， 即 便 是 集合 视图 contentsize 的 高 度 小 于 集合 视图 的 高 度 ， 当 用 户 上 拉 或 下 拉 刷 新 视图 的 时 候 也 还 


像 UlscrollView、UICollectionView 和 UITableView 这 三 种 基于 滚动 视图 的 对 象 ， 它 们 都 具有 三 个 属性 : bounces、alwaysBounceVertical 和 alwaysBounceHorizontal。 


这 三 个 属性 都 是 用 来 控制 滚动 视图 在 用 户 上 拉 或 下 拉 的 时 候 是 否 发 生 反 弹 效果 。bounces 在 系统 中 默认 是 true， 当 它 为 false 的 时 候 ， 其 他 两 个 属性 值 无 效 ， 深 动 视图 无 法 反弹 ; 只 有 当 bounces 为 
true， 其 他 两 个 属性 设置 才 有 效 ，alwaysBounceVertical 设 置 垂直 方向 的 反弹 是 否 有 效 ，alwaysBounceHorizontal 设 置 水 平方 向 的 反弹 是 否 有 效 ， 


UlTableView 上 默认 情况 下 alwaysBounceVertical 是 true，alwaysBounceHorizontal 是 false; UlSscrollView 和 UlCollectionView 默 认 情 况 下 alwaysBounceVertical 和 alwaysBounceHorizontal 都 是 


false; 只 有 当 内 容 的 尺寸 超过 了 自己 bounds 的 尺寸 时 ， 相 应 方向 上 反弹 属性 才 会 自动 设置 为 true; 


在 实际 编程 的 过 程 中 ， 实 现 滚动 视图 的 下 拉 和 上 拉 刷 新 时 ， 就 要 设置 alwaysBounceVertical 属 性 值 为 true， 这 样 才能 实现 滚动 视图 的 下 拉 和 上 拉 功 能 ; 例如 ， 集 合 视图 页 面 只 有 一 条 数据 ， 内 容 视图 没 
用 占据 到 集合 视图 的 整个 bounds 尺 寸 ， 当 前 就 无 法 滚动 ， 这 个 时 候 我 们 就 要 设置 alwaysBounceVertical 为 true， 才 能 在 垂直 方向 实现 反弹 进而 实现 上 下 拉 刷 新 功能 。 


接 下 来 ， 我 们 需要 在 故事 板 中 再 次 创建 一 个 类 似 于 HomeVC 的 控制 器 视图 。 


步骤 2 在 故事 板 的 大 纲 视图 中 选中 HomeVC 控 制 器 ， 通 过 Command+C 和 Command+V 的 复制 粘贴 操作 ， 成 功 复制 另 一 个 HomeVC 控 制 器 ， 如 图 17-2 所 示 。 将 新 创建 的 视图 控制 器 移动 到 
FollowersVC 的 右 侧 。 
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图 17-2 ”故事 板 中 复制 HomeVC 控 制 器 


如 果 仔 细 观 察 新 创建 的 视图 控制 器 我 们 可 以 发 现 ， 控 制 器 的 Class 还 是 HomeVC， 我 们 将 会 为 它 重 新 关联 一 个 新 的 UICollectionViewController 类 ， 所 以 在 故事 板 中 先 选中 这 个 刚刚 复制 好 的 控制 器 ， 在 
Identity Inspector 中 删除 Class 和 Storyboard ID 的 值 。 


查看 集合 视图 的 Header 部 分 的 属性 ，Class 还 是 Header-View，ldentifier 还 是 Header， 继 续 保持 这 两 个 设置 。 因 为 对 于 控制 器 中 的 视图 和 相关 的 视图 类 ， 我 们 可 以 有 效 地 对 它 进 行 复 用 。 
最 后 一 个 是 集合 视图 中 的 单元 格 ， 保 持 它 的 Class 为 PictureCell，ldentifier 为 Cell 即 可 。 


步骤 3 ”将 新 的 集合 视图 的 Header 部 分 中 的 按钮 的 Title 设 置 为 关注 。 


17.2 ”实现 GuestVC 类 的 代码 


iE 在 项 目 导 航 中 新 建 一 个 Cocoa Touch Class, Subclass of 为 UICollectionViewController，Class 为 GuestVC。 


步骤 2 调整 GuestVC.swift 中 代码 为 如 下 所 示 代 码 : 


import UIKi! 
class GuestVC: UICollectionViewController { 
override func viewDidLoad() { 
super.viewDidLoad() 


} 


在 该 类 中 ， 我 们 需要 删除 多 余 或 暂时 不 用 的 方法 和 属性 ， 最 后 整个 类 如 上 述 代 码 所 示 。 


步骤 3 在 GuestVC.swift 文 件 的 顶部 定义 一 个 全 局 变量 AVUser 类 型 的 数组 guestArray。 


var guestArray = [AVUser]() 
class GuestVC: UlCollectionViewController { 


全 局 变量 guestArray 用 于 存储 当前 用 户 所 浏览 的 关注 人 员 队 列 。 


举例 来 说 ， 当 前 用 户 会 通过 HomeVC 进 入 到 FollowersVC， 在 FollowersVC 中 可 以 看 到 各 个 关注 者 (或 所 关注 人 ) 的 信息 ， 在 单 击 某 个 关注 者 以 后 就 会 进入 到 他 的 访客 主页 ， 也 就 是 GuestVC。 如 果 再 
单 击 访客 的 数据 统计 Label， 又 会 进入 到 访客 的 关注 人 信息 列表 。 如 果 不 停 地 单 击 下 去 ， 束 需要 我 们 维护 一 个 AVUser 类 型 的 数组 一 一 guestArray， 最 新 的 人 员 信 息 会 存储 于 该 数组 的 最 后 ,方便 信息 显示 。 


步骤 4 在 GuestVC 类 中 添加 下 面 几 个 属性 。 


// 从 云端 获取 数据 并 存储 到 数组 


var puuidArray = [String] () 

var picArray = [AVFile] () 

// 界面 对 象 

var refresher: UlRefreshControl! 


let page: Int - 12 


其 中 ，puuidArray 用 于 存储 用 户 所 发 布 的 帖子 的 qd，PpicArray 用 于 存储 用 户 上 传 的 照片 引用 。refresher 是 UIRefreshControl 类 型 的 对 象 ， 负 责 滚动 视图 拉 电 的 刷新 动画 ， 属 于 UI 对 象 ，page 是 每 次 从 
云端 下 载 照 片 引用 的 数量 。 


步骤 5 在 viewDidLoad() 方 法 中 添加 下 面 的 代码 ， 并 在 类 中 添加 back(_;) 方 法 。 


override func viewDidLoad() { 

super .viewDidLoad () 

// 允许 垂直 的 拉 搜 刷新 操作 
f.collectionView?.alwaysBounceVertical = true 
// 导航 栏 的 顶部 信息 
self.navigationItem.title = guestArray.last?.username 
// 定义 导航 栏 中 新 的 返回 按钮 
self.navigationItem.hidesBackButton = true 
let backBtn = UIBarButtonItem (title: "返回 ", style: .plain, target: self, action: f$selector(back( :))) 
self.navigationlItem.leftBarButtonItem = backBtn 


func back( : UIBarButtonItem) { } 


在 viewDidLoad() 方 法 中 ， 首 先 允 许 集合 视图 的 拉 电 操作 ， 然 后 设置 导航 栏 的 标题 为 guestArray 数 组 中 最 新 加 入 的 AVUser 对 象 的 username。 因 为 在 导航 栏 中 默认 的 返回 按钮 ( 左 侧 的 
UlBarButtonltem) 标题 是 前 一 个 用 户 的 username， 严 重 影响 导航 栏 的 外 观 ， 所 以 这 里 将 其 隐藏 ， 然 后 自己 定义 一 个 返回 按钮 ， 设 置 其 标题 为 返回 


当 单 击 返 回 按钮 以 后 ， 需 要 执行 back( :) 方 法 ， 所 以 在 viewDidLoad0 方 法 结束 后 我 们 定义 了 该 方法 。 该 方法 有 一 个 参数 ， 会 回 传 被 单 击 的 UI 对 象 (UlBarButtonltem 按 钮 ) ， 我 们 不 会 用 到 它 ， 所 以 这 
里 将 其 忽略 


现在 很 多 导航 应 用 都 含有 向 右 划 动 返回 到 前 一 个 控制 器 的 特性 ， 下 面 我 们 来 实现 这 个 功能 。 


步骤 6 在 viewDidLoad() 方 法 的 底部 添加 下 面 的 代码 : 


N 


// 实现 向 右 划 动 返回 

let backSwipe = UISwipeGestureRecognizer (target: self, action: #selector (back( :))) 
backSwipe.direction = .right 

self.view.addGestureRecognizer (backSwipe) 


当 用 户 在 屏幕 上 向 右 划 动 时 ， 该 手势 会 被 激活 ， 并 执行 back(_:) 方 法 。 


步骤 7 完成 back( :) 方 法 中 的 程序 代码 : 


func back( : UIBarButtonItem) { 
// 退回 到 之 前 的 控制 器 
self.navigationController?.popViewController (animated: true) 
// 从 guestArray 中 移 除 最 后 一 个 AVUser 

if !guestArray.isEmpty { 
questArray.removelast () 
) 

} 


Qi 在 Xcode 8 中 ，popViewControllet 这 名 会 出 现 一 条 警告 消息 : Expression of type'UIViewController?'is unused, % X popViewController(animated:) Z7 A — 4 UIViewController JE 78 47 3R WM, dm 3X 4M 


返回 值 并 没有 被 使 用 。 解 决 这 个 错误 ， 只 需 将 上 面 的 这 行 代码 修改 为 : _=selfnavigationConttollef?.popViewConttoller(animated:true) 即 可 ， 上 面 的 _ 代 表 一 个 在 之 后 绝 不 会 用 到 的 量 。 
在 该 方法 中 ， 除 了 从 导航 控制 器 中 移 除 当前 控制 器 以 外 ， 还 移 除 了 guestArray 数 组 中 最 新 的 一 个 元 素 对 象 。 


步骤 8 在 viewDidLoad() 方 法 的 底部 添加 刷新 控件 的 代码 。 


io 壮 


// 安装 refresh 控 件 
refresher = UIRefreshControl () 

refresher.addTarget(self, action: #selector (refresh), for: .valueChangeg) 
self.collectionView?.addSubview (refresher) 


步骤 9 在 GuestVC 中 实现 refresh() 方 法 。 


// 刷新 方法 

func ref Fresh () { 
self .collectionView?.reloadData () 
self.refresher.endRefreshing|() 


} 


17.3 ”从 云端 获取 访客 的 帖子 信息 


获取 访客 帖子 信息 的 实现 代码 与 之 前 在 HomeVC 中 获取 帖子 信息 的 实现 代码 类 似 。 需 要 我 们 在 GuestVC 类 中 创建 三 个 方法 。 


步骤 1 新 建 loadPosts() 方 法 。 


的 最 后 一 


// 载 入 访客 发 布 的 帖子 


func loadPosts() { 


let query - AVQuery (className: 


query? .whereKey ("username", 


query?. 
ery?. 


// 查询 成 功 


limit = 
findObjectsI 


page 


if error == nil { 


/ / T 青空 两 个 数组 


self 


self 


// 


sel 


for object in objects! 


self 


} 


self 


{ 


Jelse ( 


print (error?.localizedDescript 


} 
}) 
} 


nBackground ({ 


.CollectionView?.reloadDa 


"Posts") 
equalTo: guestArray.last?.username) 


.puuidArray.removeAll (keepingCapacity: 
.picArray.removeAll (keepingCapacity: 


将 查询 到 的 数据 添加 到 数组 中 
f.puuidArray.append((object as AnyObject).value( 
.picArray .append ( (objec 


ta() 


ion) 


(objects: 


[Any] ?, 


fal 


t as AnyObject).value( 


error:Error?) 


in 


false) 
se) 


forKey: 
forKey: 


"pic") as! AVFile) 


该 方法 用 于 从 LeanCloud 云 端 获取 访客 的 帖子 数据 ， 并 将 其 整理 到 puuidArray 和 picArray 数 组 中 。 


Qi 我 们 可 以 从 HomeVC 类 中 直接 复制 loadPosts0 方 法 到 GuestVC 类 


个 元 素 ， 所 以 通 


步骤 2 ”在 viewDidLoad() 方 法 的 最 后 调用 loadPosts() 方 法 。 


// 调用 loadPosts 方 法 


过 数组 的 last 属 性 获取 该 访客 的 用 户 名 。 


loadPosts () 

步骤 3 添加 collectionView( :,numberOfltemsInSection:) 协 议 方 法 ， 用 于 指定 集合 视图 中 单元 格 的 个 数 。 

// 有 多 少 单元 格 

override func collectionView(  collectionView: UICollectionView, numberOfltemsInSection section: Int) 
return picArray.count 

} 

步骤 4 ”添加 collectionView( :,cellForltemAt:) 协 议 方法 ， 用 于 创建 指定 的 单元 格 。 

// 配置 单元 格 

override func collectionView(  collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) 
// 定义 Cell 
let cell = self.collectionView?.dequeueReusableCell (withReuseIdentifier: "Cell", for: indexPath) 
// 从 云端 载 入 帖子 照片 
picArray[indexPath.row].getDataInBackground ( (data:Data?, error:Error?) in 


if error 


nil { 


cell.picl 


Jelse { 


[mg.image = U 


mage (data: data!) 


print (error?.localizedDescription) 


} 
} 


return cell 


在 该 方法 中 从 集合 


17.4 获取 访客 


个 人 页 面 的 Header 信 息 


得 当初 我 们 是 如 何 获 取 HomeVC 的 Header 音 


步骤 1 


// 配置 header 


， 唯 一 有 改动 的 地 方 是 quety?.wheteKey("username'"equalTo:guestAttay.last?.usetname) ， 因 为 当前 的 访客 一 


"puuid") as! String) 


了 分 信息 的 方法 吗 ? 在 访客 页 面 中 我 们 也 需要 做 同样 的 工作 。 


在 GuestVC 类 中 添加 collectionView( :viewForSupplementaryElementOfkind:at:) 方 法 。 


-» UI 


Int { 


CollectionViewCell 


as! PictureCell 


视图 的 可 复 用 队列 中 获取 PictureCell 类 型 的 单元 格 对 象 ， 然 后 借助 PicArray 数 组 ， 从 云端 获取 指定 单元 格 位 置 的 照片 数据 ， 并 将 其 


n 


override func collectionView(  collectionView: UlCollectionView, viewForSupplemen-taryElementOfKind kind: String, at indexPath: IndexPath) -> UICo 
// X Xheader 
let header = self.collectionView?.dequeueReusableSupplementaryView (ofKind: UI-CollectionElementKindSectionHeader, withReuseIdentifier: "Header", 
// Ri. 载 入 访客 的 基本 数据 信息 
let infoQuery - AVQuery (className: " User") 
infoQuery?.whereKey ("username", equalTo: guestArray.last?.username) 
infoQuery?.findObjectsInBackground(( (objects:[Any]?, error:Error?) in 
if error == nil { 
// 判断 是 否 有 用 户 数据 
guard let objects = objects, objects.count > 0 else { 
return 
} 
// 找到 用 户 的 相关 信息 
for object in objects! { 
header.fullnameLbl.text = ((object as AnyObject).object(forKey: "fullname") as? String)?.uppercased() 
header.bioLbl.text = (object as AnyObject).object(forKey: "bio") as? String 
header.bioLbl.sizeToFit () 
header.webTxt.text = (object as AnyObject).object(forKey: "web") as? String 
header.webTxt.sizeToFit() 
let avaFile = (object as AnyObject).object(forKey: "ava") as? AVFile 
avaFile?.getDataInBackground(( (data:Data?, error:Error?) in 
header.avalmg.image = UIImage (data: data!) 
}) 
} 
}else { 


} 
}) 


print (error?.localizedDescription) 


return header 


} 


在 该 方法 中 ， 首 先 通 
判断 是 否 有 用 户 数 据 ， 如 果 有 ， 则 将 访客 数据 显示 到 GuestVC 的 Header 部 分 中 。 


有 两 个 地 方 需要 注意 ， 具 体 如 下 。 


fof: 


zc A 


其 显示 到 单元 格 的 ImageView 中 。 


indexPath) 


定 是 guestAttay 数 组 中 


lectionReusableView { 


as! HeaderVie 


过 AVQuery 类 从 _User 表 中 获取 访客 的 基本 信息 ， 利 用 guestArray 数 组 的 last 属 性 得 到 访客 的 AVUser 类 型 的 对 象 。 然 后 在 后 台 线 程 中 进行 数据 表 查 询 ， 如 果 没 有 error 则 利用 guard 


第 一 个 地 方 是 在 判断 是 否 有 访客 数据 时 ， 程 序 使 用 了 guard 语 句 。guard 与 if 语 句 类 似 ， 它 们 的 相同 点 是 ，guard 也 是 基于 一 个 表达 式 的 布尔 值 去 判断 一 段 代码 是 否 要 执行 。 与 if 语 句 不 同 的 是 ，guard 只 


有 在 条 件 不 满足 的 时 候 才 会 执行 else 中 的 代码 。 我 们 可 以 把 guard 近 似 看 作 Assert， 但 是 guard 可 以 更 优雅 地 退出 而 非 


uya 


HBivae 


guard 语 句 有 以 下 三 个 特点 : 


.guatd 是 对 你 所 期 望 的 条 件 做 检查 ， 而 非 不 符 


. 如 果 通 过 了 条 件 判 断 ， 可 选 类 型 的 变量 在 guatd 语 名 被 调用 的 范围 内 会 自动 拆 包 


- 在 上 面 的 代码 中 ， 我 们 通 将 可 选 对 象 objects 拆 包 


过 guatd let objects-objectsi& &] , 


部 。 这 是 一 个 重要 且 有 点 奇怪 的 特性 ， 但 让 guard 语 句 非常 实用 。 
- 在 guatd 语 句 中 我 们 还 进一步 判断 objects 数 组 是 否 包含 元 素 。 
. 对 不 期 望 的 情况 早 做 检查 ， 使 得 函数 更 易 读 ， 更 易 维护 。 


需要 注意 的 第 二 个 地 方 是 ， 通 过 
接 下 来 ， 要 根据 关注 情况 设置 关注 按钮 的 状态 。 


步骤 2 在 return 语 句 的 上 方 添加 下 面 的 代码 : 


// 第 2 步 . 设置 当前 用 户 和 访客 之 间 的 关注 状态 

et followeeQuery = AVUser. Current(): fol 
followeeQuery?.whereKey("user", equalTo: 
followeeQuery?.whereRey ("followee", equal 


loweeQuery () 
AVUser.current ()) 
To: guestArray.last) 


followeeQuery?.countObjectsInBackground(í (count:Int, error:Error?) in 
guard error == nil else { print(error?.localizedDescription); return } 
if count == 0 ( 
header.button.setTitle("X j£", for: .normal) 
header.button.backgroundColor = .lightGray 
Jelse ( 
header.button.setTitle("/ 已 关注 " for: .normal) 
header.button.backgroundColor - .green 


J 
)) 


在 上 面 的 代码 中 利用 AVUser 的 followeeQuery0 方 法 获取 到 云端 Followee 表 的 查询 对 象 (AVQuery 类 


代表 当前 用 户 已 经 关注 了 访客 ， 否 则 代表 还 没有 被 关注 。 
步骤 3 在 return 语 句 的 上 方 继续 添加 下 面 的 代码 : 


// 第 3 步 。 计算 统计 数据 
// 访客 的 帖子 数 


let posts = AVQuery(className: "Posts") 


posts?.whereKey("username", equalTo: guestArray.last?.username) 
posts?.countObjectsl] InBackground (4 (count:Int, error:Error?) in 
if error == nil { 
header.posts.text = "\ (count)" 
Jelse ( 


print (error?.localizedDescription) 


} 
}) 
// 访客 的 关注 者 数 


let followers = AVUser. followerQuery (guestArray. last?. objectId) 
followers?.countObjectsInBackground(( (count:Int, error:Error?) in 
if error == nil ( 
header.followers.text = "\ (count)" 
Jelse ( 
print (error?.localizedDescription) 
} 
}) 
// 访客 的 关注 数 
let followings = AVUser. followeeQuery (guestArray. last?. objectId) 
followings?.countObjectsInBackground(( (count:Int, error:Error?) in 
if error == nil ( 
header.followings.text = "\ (count)" 
Jelse ( 


print (error?.localizedDescription) 
} 
}) 


， 但 逻辑 还 是 比较 清晰 的 。 通 过 查询 云端 的 Posts 表 ， 获 取 访 客 的 帖子 数 。 


询 到 该 访客 的 关注 者 总 数 。 


步骤 3 的 代码 虽然 多 
访客 的 objectld 给 他 ， 进 而 查 


17.5 ” 单 击 访客 统计 数据 后 的 实现 代码 


与 HomeVC 一 样 ， 当 用 户 单 击 访客 的 统计 数据 以 后 应 该 跳 转 到 访客 的 FollowersVC 界 面 ， 
步骤 1 在 return 语 句 的 上 方 继续 添加 下 面 的 代码 : 


// 第 4 步 . 实现 统计 数据 的 单 击 手势 
// 单 击 posts label 


let postsTap = UITapGestureRecognizer(target: self, action: 4selector(postsTap( :))) 
postsTap.numberOfTapsRequired - 1 i 
header.posts.isUserInteractionEnabled = true 
header.posts.addGestureRecognizer (postsTap) 

// Xd Xi label 

let followersTap = UlTapGestureRecognizer(target: self, action: #selector (followersTap( 
followersTap.numberOfTapsRequired - 1 

header.followers.isUserlInteractionEnabled = true 

header.followers.addGestureRecognizer (followersTap) 

// Xx Xi&label 

et followingsTap = UlTapGestureRecognizer (target: self, action: #selector (followingsTap( . 
followingsTap.numberOfTapsRequired - 1 

header.followings.isUserInteractionEnabled - true 

header.followings.addGestureRecognizer (followingsTap) 


这 段 代 码 与 HomeVC 中 的 类 似 ， 可 以 直接 复制 并 进行 简单 修改 。 


步骤 2 在 GuestVC 类 中 添加 posts label 被 单 击 后 的 实现 方法 。 


// 单 击 posts label 
func postsTap( recognizer: UI 


if !picArray.isEmpty { 


TapGestureRecognizer) { 


， 因 此 在 接 下 来 的 程序 


后 台 线 程 所 获取 到 的 数据 是 数组 形式 ， 所 以 需要 使 用 for 语 句 摘出 AVUser 对 象 。 


型 ) 。 


:) ) ) 


:) ) ) 


然 


AS 


后 查询 表 中 


合 你 期 望 的 。 在 上 面 的 代码 中 ， 如 果 条 件 不 符合 ，guard 的 else 语 句 就 运行， 从 而 退出 闭 包 


中 可 以 直接 使 用 objects 而 不 必 加 !， 


EZ 
EnS 


显示 访客 的 关注 者 或 关注 人 员 列 表 。 


i t. 


FL XC AE £3] $6 E] 3€ findObjectsInBackground() i žk jr] é 84 i 


有 user 字 段 为 当前 用 户 ，followee 字 段 为 访客 的 记录 ， 如 果 有 记录 则 


通过 AVUser 的 followerQuery(_:) 方 法 获取 指定 用 户 (当前 访客 ) 的 关注 者 数 ， 它 包含 一 个 参数 ， 我 们 传递 
通过 followeeQuery(_:) 方 法 获取 访客 的 关注 数 ， 同 样 需 要 传递 访客 的 objectld 作 为 参数 。 


let index = IndexPath(item: 0, section: 0) 
self.collectionView?.scrollToltem(at: index, at: .top, animated: true) 


c 
A 


步骤 3 ”在 GuestVC 类 中 添加 followers 和 followings label 被 单 击 后 的 实现 方法 。 


// 单 击 followers label 


} 


func followersTap( recognizer: UlTapGestureRecognizer) { 


// 从 故事 板 载 入 FollowersVC 的 视图 
let followers = self.storyboard?.instantiateViewController (withldentifier: "FollowersVC") 
followers.user = guestArray.last!.username 
followers.show = "X it 者 " 

self.navigationController?.pushViewController(followers, animated: true) 


// 单 击 followings label 


func followingsTap( recognizer: UITapGestureRecognizer) { 


} 


// 从 故事 板 载 入 FollowersVC 的 视图 
let followings = self.storyboard?.instantiateViewController (withlIdentifier: "FollowersVC") 
followings.user = guestArray.last!.username 
followings.show = "X iz" 

self.navigationController?.pushViewController(followings, animated: true) 


as! FollowersVC 


as! FollowersVC 


在 上 面 的 两 个 方法 中 ， 都 是 先 从 故事 板 中 获取 到 FollowersVC 控 制 器 对 象 ， 然 后 将 值 传递 给 控制 器 的 user 和 show 两 个 字符 串 变量 。 最 后 在 导航 控制 器 中 push 该 控制 器 。 


Qum 在 访问 guestAtray 的 last 属 性 的 时 候 必须 用 ! 强 制 拆 包 ， 因 为 last 属 性 本 身 是 可 选 类 型 ， 根 据 可 选 链 原 则 usetname 的 值 也 是 可 选 ， 而 FollowersVC 类 的 user 属 性 并 不 是 可 选 ， 所 以 必须 强制 拆 包 。 


17.6 ”从 其 他 控制 器 切换 到 GuestVC 


接 下 来 ， 我 们 需要 从 其 他 控制 器 切换 到 GuestVC 控 制 器 。 一 般 情况 下 ， 我 们 从 FollowersVC 通 过 导航 控制 器 推送 到 GuestVC。 


步骤 1 在 项 目 导航 中 打开 FollowersVC.swift 文 件 ， 添 加 tableView( :,didSelectRowAt:) 方 法 。 


override func tableView(  tableView: UlTableView, didSelectRowAt indexPath: IndexPath) { 


} 


// 通过 indexPath 获 取 用 户 所 单 击 的 单元 格 的 用 户 对 象 
let cell = tableView.cellForRow(at: indexPath) as! FollowersCell 
// 如 果 用 户 单 击 单元 格 ， 或 者 进入 HomeVC 或 者 进入 GuestVC 

if cell.usernameLbl.text == AVUser.current().username { 

let home = storyboard?.instantiateViewController (withIdentifier: "HomeVC") as! HomeVC 
self.navigationController?.pushViewController (home, animated: true) 

Jelse ( 
guestArray.append (followerArray [indexPath.row]) 
let guest = storyboard?.instantiateViewController(withIdentifier: "GuestVC") as! GuestVC 
self.navigationController?.pushViewController (guest, animated: true) 


} 


tableView(_:didSelectRowAt:) 是 UITableViewDelegate 协 议 方法 ， 当 用 户 单 击 表格 视图 中 某 个 单元 格 的 时 候 就 会 调用 该 方法 ， 通 过 didSelectRowAt 参 数 我 们 可 以 获知 用 户 单 击 的 单元 格 位 置 。 


所 以 在 上 面 的 代码 中 ， 我 们 首先 通过 Table View 的 cellForRow(at:) 方 法 获取 所 单 击 的 单元 格 。 然 后 判断 单元 格 中 显示 的 username 是 否 是 当前 用 户 ， 是 则 推出 HomeVC 控 制 器 ， 不 是 则 将 该 访客 对 象 添 


加 到 guestArray 数 组 中 ， 并 推出 GuestVC 控 制 器 。guestArray 数 组 是 全 局 变量 ， 用 于 帮助 我 们 定位 最 新 的 访客 对 象 。 


步骤 2 在 故事 板 中 选择 用 于 显示 访客 页 面 的 集合 视图 控制 器 ， 在 ldentity Inspector 中 将 Class 设 置 为 GuestVC， 将 Storyboard 1D 设置 为 GuestVC， 如 图 17-3 所 示 。 


图 17-3 设置 新 的 集合 视图 控制 


步骤 3 ”在 GuestVC 类 的 viewDidLoad0 方 法 中 ， 设 置 集合 视图 的 背景 色 为 白色 。 


Custom Class 


Class | GuestVC + v 
Module Y 


Identity 


Storyboard ID GuestVC | 


Restoration ID | | 


(^O Use Storyboard ID 


器 与 GuestVC 关 联 


// 设置 集合 视图 的 背景 色 为 白色 


self.collectionView?.backgroundColor = .white 


构建 并 运行 项 目 ， 在 关注 者 或 关注 页 面 中 单 击 用 户 单元 格 ， 将 会 推出 访客 页 面 ， 如 图 17-4 所 示 。 


运营 商 F 下 午 10:26 1n T*F10:26 
€ LIUMING 关注 者 


p mengmeng 关注 用 户 名 称 


www.liuming.cn 


mas 


图 17-4 “呈现 访客 页 面 


如 果 你 仔细 观察 的 话 ， 会 发 现 统计 数字 是 正确 的 ， 但 是 与 User 表 相关 的 数据 都 没有 显示 出 来 。 查 询 调试 控制 台 或 者 是 在 collectionView( :viewForSupplementaryElementOfKind:,at:) 方 法 中 载 入 访 
客 数据 部 分 添加 断 点 的 话 ， 就 会 发 现 error 报 错 : Optional("Forbidden to find by class permissions.")。 这 是 LeanCloud 云 端 服务 的 一 个 报错 ， 它 代表 在 获取 用 户 信息 的 时 候 ， 查 找 (find) 操作 的 权限 被 
禁止 了 。 所 以 ， 我 们 需要 对 LeanCloud 云 端的 数据 表 进 行 权限 设置 。 


步骤 4 在 LeanCloud 云 端的 控制 台中 选中 _User 表 ， 然 后 单 击 其 他 菜单 中 的 权限 设置 ， 如 图 17-5 所 示 。 
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图 17-5 设置 _Uset 表 的 权限 
步骤 5 在 设置 User 权 限 的 面板 中 选择 左 侧 的 find， 然 后 从 右 侧 的 选项 中 选择 登录 用 户 ， 代 表 只 有 登录 的 用 户 才 可 以 进行 _User 表 的 查询 操作 ， 如 图 17-6 所 示 。 


构建 并 运行 项 目 ， 再 次 单 击 访客 单元 格 后 显示 内 容 正 常 ， 如 图 17-7 所 示 。 
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图 17-6 ”设置 _Uset 表 的 fnd 权 限 为 登录 用 户 
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图 17-7 访客 页 面 正常 显示 


17.7 ”对 于 访客 的 关注 和 取消 关注 


接 下 来 ， 我 们 要 实现 GuestVC 中 的 Header 部 分 在 单 击 关注 按钮 以 后 需要 实现 的 代码 。 


IET 在 故事 板 中 删除 GuestVC 中 Header 里 面 的 按钮 的 title 文 本 信息 ， 然 后 在 Attributes Inspector 中 将 Text Color 和 Shadow Color 设 置 为 White Color， 最 后 为 该 按钮 与 HeaderView 类 建立 Action 
关联 ，Action 方 法 的 Name 设 置 为 followBtn_clicked。 


// 从 GuestVC 单 击 关注 按钮 
QIBAction func followBtn clicked( sender: AnyObject) { 
} 


我 们 之 前 有 过 对 访客 添加 关注 或 取消 关注 相关 的 代码 经 验 ， 直 接 复制 并 简单 修改 即 可 。 


步骤 2 ”在 FollowersCell 类 中 ， 将 followBtn_clicked( :) 方 法 中 代码 全 部 复制 到 HeaderView 类 中 的 followBtn_clicked( : 访 法 里 面 ， 并 修改 为 如 下 所 示 。 


let title = button.title(for: .normal) 
// 获取 当前 的 访客 对 象 
let user = guestArray.last 
if title == "X iz" { 

quard let user = user else { return } 

AVUser.current().follow(user?.0bjectId, andCallback: { (success:Bool, error: Error?) in 
if success { 

self.button.setTitle("./ C Xi£", for: .normal) 

self.button.backgroundColor = .green 
Jelse ( 

print (error?.localizedDescription) 


人 
a 
L09] 
[0] 


quard let user = user else { return } 
AVUser.current().unfollow(user?.0bjectlId, andCallback: { (success:Bool, error: Error?) in 


self.button.setTitle("X j£", for: .normal) 
self.button.backgroundaColor = .lightGray 


print (error?.localizedDescription) 


e 


通过 关注 按钮 的 title 文 本 ， 判 断 当 前 用 户 是 要 关注 还 是 要 取消 对 访客 的 关注 。 


构建 并 运行 项 目 ， 效 果 如 图 17-8 所 示 。 
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图 17-8 ”访客 页 面 关注 按钮 的 状态 变化 


本 章 小 结 


本 章 中 我 们 所 实现 的 访客 页 面 功能 与 之 前 个 人 主页 的 功能 相似 ， 虽 然 篇 幅 很 长 ， 但 是 复制 了 很 多 之 前 我 们 所 编写 的 代码 。 如 果 你 感觉 没有 完全 掌握 前 面 的 技能 ， 也 可 以 借助 本 章 再 巩固 一 遍 。 


第 18 章 ”设置 访客 页 面 的 布局 


在 之 前 几 章 的 实战 练习 中 ， 我 们 新 创建 了 几 个 新 的 控制 器 和 视图， 本章 需要 设置 它们 的 界面 布局 。 


18.1 ”用户 的 退出 


我 们 先 为 Instagram 应 用 添加 用 户 退 出 功能 。 因 为 之 前 一 直 没有 实现 该 功能 ， 所 以 每 次 在 测试 新 用 户 登 录 的 时 候 都 需要 删除 模拟 器 中 的 Instagram 应 用 ， 再 重新 编译 并 构建 项 目 。 下 面 就 来 解决 这 个 问 


步骤 1 在 项 目 导 航 中 打开 故事 板 ， 从 对 象 库 中 拖 电 一 个 Bar Button Item 控件 到 HomeVC 视 图 的 导航 栏 中 的 右 侧 位 置 。 选 中 这 个 ltem， 在 Attributes Inspector 中 将 System Item 设 置 为 stop， 如 图 
18-1 所 示 。 


图 18-1 在 HomeVC 的 导航 栏 中 添加 退出 按钮 


步骤 2 将 Xcode 切换 到 助手 编辑 嚣 模式， 为 刚才 新 添加 的 Bar Button ltem 按 钮 与 HomeVC 类 创建 Action 关 联 ，Name 设 置 为 logout。 


步骤 3 在 logout(_:) 方 法 中 ， 完 成 下 面 的 代码 : 


// 单 击 退出 登录 
QIBAction func logout( sender: AnyObject) { 
// 退出 用 户 登 录 
AVUser.logOut () 
// 从 UserDefaults 中 移 除 用 户 登 录 记 录 
UserDefaults.standard.removeObject(forKey: "username") 
UserDefaults.standard.synchronize|() 
// 设置 应 用 程序 的 rootViewController 为 登录 控制 器 
let signIn = self.storyboard?.instantiateViewController (withldentifier: "SignInVC") 
let appDelegate = UlIApplication.shared.delegate as! AppDelegate 
appDelegate.window?.rootViewController = signIn 


在 该 方法 中 ， 首 先 退 出 用 户 登 录 ， 然 后 再 从 UserDefaults 中 移 除 用户 登 录 记 录 ， 最 后 从 故事 板 中 载 入 Storyboard 1D 为 SignInVC 的 控制 器 ， 并 作为 应 用 程序 的 root 控 制 器 显示 到 屏幕 上 。 


步骤 4 ”在 故事 板 中 选择 登录 页 面 控制 器 ， 在 ldentity Inspector 中 将 Storyboard IDi&&7JSignInVC, 


构建 并 运行 项 目 ， 当 单 击 导 航 栏 中 的 Stop 按 钮 以 后 即 会 退出 已 登录 状态 ， 并 进入 登录 界面 。 


18.2 设置 HeaderView 的 布局 


步骤 1 在 HeaderView 类 中 ， 添 加 对 awakeFromNib() 方 法 的 重 写 。 


override func awakeFromNib() { 
super.awakeFromNib() 
// SA 
let width = UIScreen.main.bounds.width 


} 


该 方法 中 ,我们 首先 通过 UlScreen 类 获取 到 用 户 屏幕 的 宽度 值 。 


"i 一 般 情 况 下 ， 我 们 对 控制 器 (UlViewController; UITableViewController $:UICollection-ViewController4) 进 些 初始 化 设 定 的 时 候 都 是 通过 viewDidLoad0 方 法 。 对 视图 (UIView、 


UICollectionReusableView、UITableViewCell 等 ) 进行 初始 化 设 定 的 时 候 都 是 通过 awakeFromNib0 方 法 。 


步骤 2 对 avalmg、posts、followers 和 followings 进 行 布局 ， 添 加 下 面 的 代码 到 let width 语 句 的 下 面 : 


// 对 头像 进行 布 / 局 

avalmg.frame = CGRect (x: width / 16, y: width / 16, width: width / 4, height: width / 4) 
// X 三 个 统计 数据 进行 布 局 

posts. frame = CGRect(x: width / 2.5, y: avalmg.frame.origin.y, width: 50, height: 30) 
followers.frame = | CGRect x: width / 1.6, y: avalmg.frame.origin.y, width: 50, height: 30) 
ollowings.frame = CGRect(x: width / 1.2, y: avalmg.frame.origin.y, width: 50, height: 30) 
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因为 要 适应 不 同 尺 十 的 屏幕 ， 所 以 在 设置 头像 时 将 它 的 x 和 y 的 值 设 置 为 屏幕 宽度 的 1/16，width 和 height 为 屏幕 宽度 的 1/4， 这 样 在 各 种 屏幕 上 都 会 呈现 一 个 完美 的 比例 。 


对 于 三 个 统计 数据 的 Label 来 说 ， 他 们 的 y 位 置 都 是 一 样 的 ， 并 且 与 头像 的 y 位 置 相同 。 只 不 过 它们 的 x 值 依次 为 屏幕 宽度 的 1/2.5、1/1.6 和 1/1.2， 这 样 做 的 目的 也 是 为 了 可 以 根据 屏幕 的 实际 比例 来 完美 


定位 它们 的 水 平 坐标 ， 当 然 你 也 可 以 根据 自己 的 意愿 进行 微调 。 


步骤 3 ”继续 添加 下 面 的 代码 : 


// 设置 三 个 统计 数据 Title 的 布局 

postTitle. center = CGPoint (x: ES center.x, y: posts.center.y + 20) 
followersTitle.center - ee UE followers.center.x, y: followers.center.y + 20) 
ollowingsTitle.center = = CGPoint (x: followings.center.x, y: followings.center.y + 20) 


// 设置 按钮 的 布局 


E- 


fullnameLbl.frame = CGRect(x: avalImg.frame.origin.x, y: avalImg.frame.origin.y + avalImg.frame.height, width: width - 30, height: 30) 
webTxt.frame = CGRect(x: avalmg.frame.origin.x - 5, y: fullnameLbl.frame.origin.y + 15, width: width - 30, height: 30) 
bioLbl.frame = CGRect(x: avalmg.frame.origin.x, y: webTxt.frame.origin.y + 30, width: width - 30, height: 30) 


在 这 段 代 码 中 ， 我 们 利用 UIView 的 center 属 性 定位 三 个 Label 的 位 置 ， 因 为 只 要 确定 Title 的 中 心 点 与 其 上 方 的 统计 Label 的 中 心 点 一 致 ， 就 可 以 完美 呈现 


在 设置 button 宽 度 时 ， 我 们 让 它 = 屏 幕 宽 度 -postTitle 的 x 值 -10， 这 样 它 的 宽度 正好 是 从 postTitle 左 边缘 开始 ， 到 屏幕 右 侧 边缘 10 点 的 距离 结束 。 


button.frame = CGRect(x: postTitle.frame.origin.x, y: postTitle.center.y + 20, width: width - postTitle.frame.origin.x - 10, height: 30) 


这 六 个 控件 了 。 


构建 并 运行 项 目 ， 效 果 如 图 18-2 所 示 。 
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图 18-2 HeaderView 的 界面 布局 


er 如 果 在 模拟 器 中 Label 和 Text View 的 背景 色 之 间 发 生 了 相互 遮挡 的 情况 ， 则 可 以 在 故事 板 的 Atttibutes Inspector 中 ， 将 它们 的 Background 设 置 为 Clear Color， 如 图 18-3 所 示 。 
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图 18-3 设置 Text View] Background 77 Clear Color 


18.3 ”设置 集合 视图 单元 格 的 大 小 


之 前 在 故事 板 中 ， 我 们 为 集合 视图 定义 的 单元 格 大 小 为 106。 而 针对 不 同 的 屏幕 设备 ， 需 要 有 不 同 的 单元 格 大 小 ， 所 以 要 在 HomeVC 类 中 通过 程序 代码 进行 设置 。 


步骤 1 在 项 目 导航 中 打开 HomeVC.swift 文 件 ， 添 加 一 个 新 的 方法 collectionView( :lay-out:sizeForltemAt:), 


SE 


// 设置 单元 格 大 小 

func collectionView(  collectionView: UICollectionView, layout collectionViewLayout: UlCollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize { 
let size = CGSize(width: self.view.frame.width / 3, height: self.view.frame.width / 3) 
return size 


} 


通过 该 方法 ， 我 们 可 以 单独 设置 每 一 个 单元 格 的 高 度 和 宽度 ， 只 是 这 里 统一 设置 为 控制 器 视图 的 1/3 大 小 。 


如 果 你 此 时 运行 应 用 程序 的 话 ， 就 会 发 现 程序 根本 不 会 运行 到 该 方法 ， 这 是 为 什么 呢 ? 通过 Xcode 的 帮助 文档 可 以 发 现 ， 该 方法 属于 集合 视图 的 布局 协议 (UlCollectionViewDelega- 
teFlowLayout) ， 而 该 协议 并 没有 包含 在 UICollectionViewController 的 默认 协议 之 中 。 默 认 协 议 有 两 个 ， 分 别 是 UICollectionViewDelegate 和 UICollectionViewDataSource。 


步骤 2 在 HomeVC 类 的 声明 中 ， 添 加 UlCollectionViewDelegateFlowLayout 协 议 。 


class HomeVC: UlCollectionViewController, UICollectionViewDelegateFlowLayout { 


步骤 3 在 项 目 导 航 中 打开 PictureCell 类 ， 为 其 添加 awakeFromNib() 方 法 。 


override func awakeFromNib() { 
super.awakeFromNib() 
let width = UIScreen.main.bounds.width 
// 将 单元 格 中 Image View 的 尺寸 同样 设置 为 屏幕 宽度 的 1/3 
picImg.frame = CGRect(x: 0, y: 0, width: width / 3, height: width / 3) 


步骤 4 复制 上 面 的 awakeFromNib() 方 法 ， 在 项 目 导 航 中 打开 GuestVC.swift 文 件 ， 将 方法 复制 到 该 类 中 。 同 时 为 GuestVC 类 也 添加 UICollectionViewDelegateFlowLayout 协 议 。 


构建 并 运行 项 目 ， 不 管 是 当前 用 户 页 面 还 是 访客 页 面 ， 集 合 视图 中 的 单元 格 及 照片 尺寸 均 为 屏幕 宽度 的 1/3， 如 图 18-4 所 示 。 
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图 18-4 ”设置 集合 视图 的 单元 格 大 小 为 屏幕 宽度 的 1/3 


18.4 ”关注 页 面 的 布局 


iB, 我们 需要 对 关注 页 面 进行 布局 。 


步骤 1 在 项 目 导航 中 打开 FollowersVC.swift 文 件 ， 添 加 一 个 新 的 协议 方法 : 


override func tableView( tableView: UlTableView, heightForRowAt indexPath: IndexPath) -> CGFloat { 
return self.view.frame.width / 4 


— 


通过 该 协议 方法 可 以 设置 指定 单元 格 的 行 高 ， 这 里 让 行 高 为 屏幕 宽度 的 1/4， 也 就 意味 着 屏幕 越 宽 ， 单 元 格 的 高 度 就 会 成 比例 变 高 。 


步骤 2 在 项 目 导航 中 打开 FollowersCell.swift 文 件 ， 在 awakeFromNib0 方 法 中 添加 下 面 的 代码 : 


override func awakeFromNib() { 
super .awakeFromNib () 


let width = UIScreen.main.bounds.width 

avalmg.frame = CGRect(x: 10, y: 10, width: width / 5.3, height: width / 5.3) 
usernamelbl.frame = CGRect(x: avalmg.frame.width + 20, y: 30, width: width / 3.2, height: 30) 
followBtn.frame = CGRect(x: width - width / 3.5 - 20, y: 30, width: width / 3.5, height: 30) 


在 获取 到 屏幕 的 宽度 值 以 后 ， 首 先 设置 用 户头 像 的 位 置 ， 宽 度 和 高 度 与 屏幕 宽度 的 比例 为 1/5.3。usernameLbl 位 于 avalmg 的 右 侧 10 点 的 位 置 ， 所 以 将 其 设置 为 avalmg 宽 度 +20， 因 为 avalmg 左 右 两 
侧 各 有 10 点 的 间隔 空间 。followBtn 位 于 单元 格 的 最 右 人 出 ， 它 的 x 值 应 为 屏幕 宽度 -followBtn 按 钮 宽度 (width:width/3.5) -与 右边 缘 的 间隔 空间 (20) 


构建 并 运行 项 目 ， 关 注 页 面 在 任何 设备 上 都 完美 显示 ， 如 图 18-5 所 示 。 


上 午 10:08 me Carrier F 10:11 AM 


关注 《 LELE 关注 


10:10 AM 


关注 


shanshan v Bx 


图 18-5 不同 屏幕 尺寸 的 关注 页 面 效 果 


本 章 小 结 


本 章 我 们 首先 为 Instagram 项 目 添 加 了 用 户 退 出 功能 ， 然 后 利用 代码 为 HeaderView 进 行 了 页 面 布 局 ， 这 里 与 之 前 设置 登录 、 注 册页 面 的 布局 类 似 ， 主 要 是 运用 Ul 控 件 的 frame 属 性 来 针对 不 同 尺 寸 屏 幕 
进行 布局 。 


三 部 分 


. 第 19 章 ”创建 用 户 配置 界面 
. 第 20 章 ”个 人 配置 页 面 数据 的 接收 与 提交 


- 第 21 章 ”实现 帖子 上 传 功 能 


. 第 23 章 ”搭建 帖子 控制 器 的 界面 


* 第 24 章 ”设置 帖子 单元 格 的 布局 


- 第 25 章 ”进一步 美化 程序 界面 


第 19 草 创建 用 尸 配 置 界面 


本 章 我 们 将 会 为 用 户 创建 个 人 配置 界面 ， 当 用 户 在 HomeVC 的 Header 部 分 中 单 击 编辑 个 人 主页 按钮 后 ， 就 会 进入 到 该 页 面 来 修改 个 人 信息 。 


19.1 在 故事 板 中 创建 个 人 配置 控制 器 视图 


步骤 1 在 故事 板 中 ， 从 对 象 库 中 拖 电 一 个 新 的 View Controller 到 GuestVC 的 右 人 出 ， 确 定 选中 新 创建 的 控制 器 ， 从 菜单 栏 中 选择 Editor 一 Embed In 一 Navigation Controller， 如 图 19-1 所 示 。 


UllmageView 


图 19-1 为 新 创建 的 View Controllers A Aud] 8 
将 新 创建 的 视图 控制 器 内 找到 导航 控制 器 中 ， 这 样 就 可 以 显 性 地 在 故事 板 中 为 控制 器 设计 导航 栏 的 用 户 界 面 ， 包 括 两 侧 的 Bar Button Item 对 象 和 中 间 的 Title 对 象 。 


Qz 即便 不 在 故事 板 中 做 Embed In 操作 ， 当 新 控制 器 被 推 到 手机 屏幕 上 时 也 是 带 有 导航 栏 的 ， 因 为 我 们 后 面 会 在 HomeVC 控 制 器 中 根据 用 户 交 互 将 其 推出 。 只 不 过 这 样 就 不 能 在 故事 板 中 通过 显 性 
的 方式 编辑 导航 栏 中 的 UI 对 象 ， 而 只 能 通过 代码 的 形式 定义 UI 对 象 。 


步骤 2 ”从 对 象 库 中 拖 蝶 两 个 Bar Button Item 对 象 到 导航 栏 的 左右 两 侧 ， 在 Attributes Inspector 中 设置 左 侧 的 Bar Button Item 的 Title 为 取消 ， 设 置 右 侧 的 Title 为 保存 。 
在 该 页 面 中 我 们 将 会 利用 Text Field 填 写 各 种 信息 ， 为 了 避免 在 填写 信息 的 时 候 出 现 被 虚拟 键盘 遮挡 的 情况 ， 还 需要 添加 一 个 滚动 视图 。 


步骤 3 ”从 对 象 库 中 拖 电 一 个 Scroll View 到 视图 中 ， 如 图 19-2 所 示 。 


图 19-2 ”添加 滚动 视图 到 HomeVC 视 图 中 


Qus 在 Xcode 8 Beta2 中 ， 当 我 们 向 具有 导航 栏 的 控制 器 拖 慢 滚动 视图 的 时 候 ， 会 发 生 错位 的 情况 ， 这 也 说 明了 在 默认 状态 下 滚动 视图 的 y 属 性 值 与 实际 位 置 是 错位 的 ， 错 位 的 值 正 好 是 导航 栏 的 高 
度 。 如 果 我 们 不 解决 这 个 问题 ， 那 么 之 后 所 有 添加 到 滚动 视图 的 UI 控 件 均 有 错位 的 情况 ， 如 图 19-3 所 示 。 但 如 果 你 使 用 的 是 Beta 6 以 上 的 Xcode 8， 则 不 会 出 现 这 样 的 问题 ， 可 以 直接 跳 到 步骤 5。 
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图 19-3 ”滚动 视图 中 Image View 的 错位 
步骤 4 ”在 大 纲 视 图 中 选择 新 创建 的 视图 控制 器 (黄色 图 标的 ) ， 在 Attributes Inspector 中 的 Simulated Metrics 部 分 将 Top Bar 设 置 为 Opaque Navigation bar， 如 图 19-4 所 示 。 
> 图 sign InVC Scene 


> 图 Sign UpvC Scene 
> [S] Reset PasswordVC Scene 


> E Tab Bar Controller Scene 


> E HomevC Scene 


> E GuestvC Scene 
站 Is Initial View Controller 


v [f] view Controller Scene Layout @ Adjust Scroll View Insets 
UlScrollView M) Hide Bottom Bar on Push 
Resize View From NIB 
四 Bottom Layout Guide M) Use Full Screen (Deprecated) 
v [] View Extend Edges 四 Under Top Bars 
口 ] scrol View | © Under Bottom Bars 
v |< Navigation Item l) Under Opaque Bars 
b» ' Left Bar Button Items i 
» =] Right Bar Button Items Transition Style Cover Vertical 
Q First ES Presentation Full Screen i3 
国 exit : M) Defines Context 


图 19-4 ”将 控制 器 的 Top Barit Æ 7J Opaque Navigation bar 


Opaque Navigation Bar 代 表 该 视图 控制 器 的 导航 栏 是 不 透明 的 ， 因 此 在 向 视图 中 添加 滚动 视图 的 时 候 就 不 会 有 错位 的 情况 出 现 。 另 外 ， 我 们 也 可 以 使 用 自动 布局 (Auto Layout) 的 约束 特性 来 解决 
这 个 问题 ,但 不 在 本 书 的 讨论 范围 之 内 。 


步骤 5 ”选中 滚动 视图 ， 在 size Inspector 中 设置 x 和 y 的 值 为 0%， 并 将 其 宽度 和 高 度 调整 为 屏幕 大 小 ， 如 图 19-5 所 示 。 
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图 19-5 ”设置 滚动 视图 的 大 小 和 位 置 


步骤 6 MIRER Amage View 到 滚动 视图 的 右上 角 ， 在 Size Inspector 中 将 宽度 和 高 度 均 设置 为 80， 在 Attributes Inspector 中 将 lImage 设 置 为 pp.jpg， 如 图 19-6 所 示 。 


步骤 7 从 对 象 库 拖 蝶 3 个 Text Field 到 Image View 的 左 侧 和 下 面 ， 分 别 将 其 Placeholder 设 置 为 姓名 、 用 户 名 和 了 网站， 如 图 19-7 所 示 。 


图 19-6 设置 头像 Image View 


图 19-7 设置 个 人 主页 中 的 Text Field 


步骤 8 ”从 对 象 库 拖 蝶 1 个 Text View 到 网 站 Text Field 的 下 面 ， 删 除 其 文本 内 容 。 
步骤 9 ”从 对 象 库 拖 忠 1 个 Label 到 Text View 的 下 面 ， 将 Title 设 置 为 私人 信息 。 


步骤 10 ”从 对 象 库 拖 岛 3 个 Text Field 到 Label 的 下 面 ， 分 别 将 其 Placeholder 设 置 为 电子 邮件 、 移 动 电话 和 性 别 ， 如 图 19-8 所 示 。 


图 19-8 设置 个 人 主页 中 的 其 他 Text Field 


19.2 创建 Action 和 Outlet 关 联 


接 下 来 ， 我 们 要 为 新 创建 的 控制 器 视图 创建 必要 的 Action 和 Outlet 关 联 。 
ET 在 项 目 导 航 中 新 建 Cocoa Touch Class 类 型 的 文件 ，Subclass of 为 UIViewController，Class 为 EditVC。 在 故事 板 中 将 新 创建 的 控制 器 的 Class 设 置 为 EditVC。 


步骤 2 将 Xcode 切换 到 助手 编辑 器 模式 ， 创 建 下 面 的 Action 关 联 。 


// 单 击 保存 按钮 的 实现 代码 


CD 一 


// 隐藏 虚拟 键盘 


self.view.endi 


/ 单 击 取 消 按钮 的 实现 代码 


IBAction func cancel clicked( sender: AnyObject) { 


// 销毁 个 人 信息 编辑 控制 器 
self.dismiss(animated: true, completion: nil) 


Editing (true) 


BAction func save clicked( sender: AnyObject) { 


其 中 ，save_clicked(_:) 方 法 与 导航 栏 的 保存 按钮 关联 ， 目 前 暂时 不 执行 任何 代码 。cancel_clicked(_:) 方 法 与 导航 栏 的 取消 按钮 关联 ， 它 会 先 隐藏 虚拟 键盘 ， 然 后 销毁 当前 的 EditVC 控 制 器 。 


步骤 3 创建 下 面 的 Outlet 关 联 。 


二 
E 
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QQ 
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lass EditVC: UJ 


[ViewController { 


t weak var telTxt: 
genderTxt: Ul 


emailTxt: Ul 


[TextField! 
UITextField! 
[TextField! 


e 

// UI 对 象 部 分 

// 滚动 视图 

@IBOutlet weak var scrollView: UIScrollView! 
// 个 人 头像 

aTBOutlet weak var avalmg: UllmageView! 

// 上 半 部 分 的 信息 

GIBOutlet weak var fullnameTxt: UITextField! 
@IBOutlet weak var usernameTxt: UITextField! 
@IBOutlet weak var webTxt: UITextField! 
@IBOutlet weak var bioTxt: UITextView! 

// 私人 信息 Label 

QIBOutlet weak var titleLbl: UILabel! 

/ 部 

QII le 

QII le 

QII le 


步骤 4 选择 视图 中 所 有 的 Text Field， 在 Attributes Inspector 中 将 Clear Button 设 置 为 ls always visible, 


步骤 5 ”在 故事 板 选中 webTxt 控 件 对 象 ， 在 Attributes Inspector 中 将 Keyboard Type 设置 为 URL， 如 图 19-9 所 示 。 


步骤 6 参照 


Correction Default 


Keyboard Type | URL 


图 19-9 ”设置 webTxt 的 键盘 输入 类 型 为 URL 


步骤 5 的 操作 ， 将 emailTxt 的 Keyboard Type 设 置 为 E-mail Address，telTxt 的 设置 为 Phone Pad. 


19.3 ”为 视图 创建 布局 代码 


接 下 来 要 为 EditVC 中 的 UI 控件 对 象 进行 布局 。 


步骤 1 在 EditVC 类 中 添加 alignment() 方 法 ， 并 在 viewDidLoad() 方 法 中 调用 该 方法 。 


右 侧 10 个 点 ， 顶 部 15 个 点 的 位 置 ， 它 的 


override func viewDidLoad() ( 


super.viewDidLoad() 
// 调用 布局 方法 


alignment () 


) 
// 界面 布局 


} 


func alignment() { 


步骤 2 ”在 alignment( 方 法 中 添加 下 面 的 代码 : 


func alignment() { 


SCrO 


f.view.1 


let width = self.view.frame.width 
let height - sel 
lView. 


Frame.height 
frame = CGRect (x: 0, y: 0, width: width, height: height 


— 


avalmg.frame = CGRect(x: width - 68 - 10, y: 15, width: 68, height: 68) 


avalmg.layer.cornerRadius - aval 


avalmg.clipsTol 


mg.frame.width / 2 


Bounds = true 


在 上 面 的 代码 中 ， 首 先 获取 了 控制 器 视图 的 宽度 和 高 度 ， 注 意 ， 这 里 的 高 度 值 是 屏幕 的 实际 高 度 。 然 后 利用 获取 到 的 宽度 和 高 度 值 设置 滚动 视图 的 位 置 和 大 小 。 接 着 将 avalmg 的 位 置 设置 为 靠 滚动 视图 


宽 高 是 68 个 点 ， 并 且 设置 头像 为 圆 形 效果 显示 。 


步骤 3 在 alignment() 方 法 中 继续 添加 如 下 代码 : 


Lp 


fullnameTxt. 


usernameTxt 


frame = CGRec! 
.frame = CGRec! 
webTxt.frame = CGRect(x: ] 
bioTxt.frame = CGRect(x: 1] 


10, 
10, 


y: avalmg.frame.origin.y, width: width - avalmg.frame.width - 30, height: 30) 
y: fullnameTxt.frame.origin.y + 40, width: width - avalmg.frame.width - 30, height: 30) 


y: usernameTxt.frame.origin.y + 40, width: width - 20, height: 30) 
y: webTxt.frame.origin.y + 40, width: width - 20, height: 60) 


在 设置 fullnameTxt 的 y 属 性 时 ， 让 它 与 avalmg 齐 高 ， 宽 度 设置 为 控制 器 视图 宽度 -avalmg 宽 度 -30。 减 30 是 因为 fullnameTxt 的 左 侧 有 10 个 点 的 间隔 ，fullnameTxt 与 avalmg 有 10 个 点 的 间 
avalmg 与 控制 器 视图 的 右 侧 有 10 个 点 


的 间 隅 了 一 共 30 个 点 。 


另外 ， 因 为 bioTxt 是 Text View 控 件 ， 所 以 将 它 的 高 度 设 置 为 60。 


步骤 4 ”在 alignment0 方 法 中 继续 添加 下 面 的 代码 : 


titleLbl.frame = CGRect(x: 10, y: bioTxt.frame.origin.y + 100, width: width - 20, height: 30) 
emailTxt.frame = CGRect(x: 10, y: titleLbl.frame.origin.y + 40, width: width - 20, height: 30) 
telTxt.frame = CGRect(x: 10, y: emailTxt.frame.origin.y + 40, width: width - 20, height: 30) 

genderTxt.frame = CGRect(x: 10, y: telTxt.frame.origin.y + 40, width: width - 20, height: 30) 


步骤 5 在 故事 板 中 为 HomeVC 的 HeaderView 部 分 的 button 与 EditVC 的 导航 控制 器 创建 关联 ， 在 弹出 的 关联 面板 中 选择 Present Modally， 如 图 19-10 所 示 。 这 样 当 用 户 单 击 编辑 个 人 主页 按钮 时 就 会 
跳 转 到 带 有 导航 栏 的 EditVC 控 制 器 。 
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图 19-10 “为 HomeVC 和 EditVC 控 制 器 创建 关联 
步骤 6 在 故事 板 里 面 选中 EditVC， 在 Attributes Inspector 中 将 Background 设 置 为 Group Table View Background Color, 


构建 并 运行 项 目 ， 效 果 如 图 19-11 所 示 。 


图 19-11 EditVC 控 制 器 的 用 户 界 面 


步骤 7 为 了 使 bioTxt 更 加 美观 ， 在 bioTxt.frame 语 句 的 下 面 添加 如 下 代码 : 


bioTxt.frame = CGRect(x: 10, y: webTxt.frame.origin.y + 40, width: width - 20, height: 60) 
// 为 bioTxt 创 建 1 个 点 的 边线 ， 并 设置 边线 的 颜色 

bioTxt.layer.borderWidth = 1 
bioTxt.layer.borderColor = UIColor (red: 230/255.0, green: 230/255.0, blue: 230/255.0, alpha: 1) .cgColor 
// 设置 bioTxt 为 圆 角 

bioTxt.layer.cornerRadius = bioTxt.frame.width / 50 

bioTxt.clipsToBounds = true 


构建 并 运行 项 目 ， 效 果 如 图 19-12 所 示 。 


图 19-12 ”为 bioTxt 设 置 边 线 和 圆 角 


194 实现 与 界面 相 天 的 代码 


接 下 来 我 们 需要 实现 的 效果 是 : 当 用 户 单 击 性 别 Text Field 的 时 候 ， 呈 现 出 一 个 获取 器 视图 (Picker View) 供用 户 选择 性 别 ， 这 要 借助 PickerView 类 来 实现 。 


步骤 1 在 EditVC 类 中 添加 两 个 协议 声明 和 三 个 属性 : 


class EditVC: UlViewController, UlPickerViewDelegate, UIPickerViewDataSource { 
// PickerView 和 PickerData 
var genderPicker: UIPickerView! 
let genders = ["J3", "Jc"] 
var keyboard = CGRect () 


如 果 你 是 第 一 次 使 用 UIPickerView (获取 器 ) ， 需 要 注意 : 我 们 不 能 直接 通过 它 的 属性 或 方法 设置 可 供 选 择 的 条 目 ， 而 要 像 集合 视图 或 表格 视图 那样 ， 从 数据 源 中 得 到 相关 信息 。 因 此 ， 需 要 让 EditVC 
类 符合 UIPickerViewDelegate 和 UlPickerViewDataSource 协 议 。 


在 三 个 属性 中 : genderPicker 是 UlPickerView 类 型 的 对 象 ; genders 是 将 要 呈现 在 获取 器 中 的 选项 内 容 ; 而 keyboard 则 用 于 存储 虚拟 键盘 的 位 置 和 大 小 ， 当 键盘 出 现 的 时 候 ， 需 要 借助 这 个 数据 调整 
滚动 视图 中 Content View 的 垂直 偏 移 量 。 


步骤 2 在 EditVC 类 中 添加 与 获取 器 相关 的 四 个 协议 方法 : 


// 获取 器 方法 

// 设置 获取 器 的 组 件数 量 

func numberOfComponents (in pickerView: UIPickerView) -> Int ( 
return 1 


} 

// 设置 获取 器 中 选项 的 数量 

func pickerView( pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int { 
return genders.count 


} 
// 设置 获取 器 的 选项 Title 
func pickerView(  pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? { 


return genders [row] 


) 
// 从 获取 器 中 得 到 用 户 选择 的 Item 


func pickerView(  pickerView: UlPickerView, didSelectRow row: Int, inComponent component: Int) { 
genderTxt.text = genders [row] 
self.view.endEditing (true) 


) 


在 添加 的 这 四 个 协议 方法 中 ， 前 两 个 属于 UlPickerViewDataSource 协 议 方法 ， 后 两 个 则 属于 UlPickerViewDelegate 协 议 方 法 。 


numberOfComponents(in:) 方 法 用 于 设置 在 获取 器 中 显示 几 列 的 数据 选项 ， 如 图 19-13 所 示 ， 左 侧 的 获取 器 只 有 一 个 Component ( 列 ) ， 而 右 侧 的 获取 器 有 四 个 Component。 
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图 19-13 ”两 种 不 同 的 获取 器 
pickerView( :numberOfRowsInComponent:) 协 议 方法 用 于 设置 每 个 Component 中 有 多 少 个 选项 ， 类 似 于 集合 视图 中 的 collectionView(_ :number-OfltemsInSection:) 方 法 。 
pickerView(_:titleForRow:forComponent:) 是 UIPickerViewDelegate 协 议 方法 ， 当 获取 器 呈现 在 屏幕 上 ， 需 要 显示 每 个 选项 的 内 容 时 会 调用 该 方法 ， 这 里 让 它 返回 字符 串 内 容 : 男 或 女 。 
当 用 户 选择 了 获取 器 中 的 某 个 选项 后 ， 会 执行 pickerView( :didSelectRow:inComponent:) 协 议 方 法 ，didSelectRow 代 表 用 户 选择 的 行 ，inComponent 代 表 从 哪个 Component 中 选择 的 。 


步骤 3 在 viewDidLoad() 方 法 中 添加 下 面 的 代码 : 


override func viewDidLoad() { 
super.viewDidLoad() 
// 在 视图 中 创建 PickerView 
genderPicker = UIPickerView () 
genderPicker.dataSource = self 
genderPicker.delegate = self 
genderPicker.backgroundColor = UlIColor.groupTableViewBackground 
genderPicker.showsSelectionIndicator = true 
genderTxt.inputView genderPicker 


在 viewDidLoad() 方 法 中 ,将 genderPicker 的 datasource 和 delegate 属 性 指向 当前 控制 器 对 象 ， 这 样 ， 获 取 器 对 象 就 知道 自己 需要 的 数据 向 谁 要 ， 或 者 是 用 户 交 互 的 信息 传送 给 谁 。 


在 代码 的 最 后 一 行 是 将 genderTxt 的 inputView 属 性 指向 genderPicker， 这 样 ， 当 用 户 单 击 genderTxt 以 后 ， 使 得 该 Text Field 控 件 变 成 了 first responder (首要 响应 对 象 ) ， 获 取 器 就 会 从 屏幕 底部 滑 
出 来 ， 如 图 19-14 所 示 。 在 选择 好 性 别 后 ， 选 项 的 Title 就 会 呈现 到 Text Field 中 。 


电子 邮件 


移动 电话 | 


图 19-14 EditVC 中 获取 器 的 运行 效果 
接 下 来 ， 我 们 要 处 理 与 虚拟 键盘 相关 的 问题 ， 这 和 之 前 在 SignUpVC 中 的 代码 类 似 ， 可 以 将 相关 代码 复制 过 来 。 


步骤 4 从 SignUPVC 类 的 viewDidLoad() 方 法 中 复制 下 面 的 代码 到 EditVC 类 的 view-DidLoad() 方 法 中 。 


override func viewDidLoad() í--- 

genderTxt.inputView genderPicker 

// 检测 键盘 出 现 或 消失 的 状态 

NotificationCenter.default.addObserver(self, selector: #selector (showKeyboard), name: Notification.Name.UIKeyboardWillShow, objec 

NotificationCenter.default.addObserver(self, selector: f4selector(hideKeyboard), name: Notification.Name.UIKeyboardWillHide, objec 
// 单 击 控制 器 视图 后 让 键盘 消失 
let hideTap = UITapGestureRecognizer (target: self, action: #selector (hideKeyboardTap)) 
hideTap.numberOfTapsRequired = 1 
self.view.isUserInteractionEnabled = true 
self.view.addGestureRecognizer (hideTap) 
// 调用 布局 方法 


alignment () 


nil 
nil) 


— 


步骤 5 在 EditVC 类 中 添加 下 面 三 个 方法 : 


// 隐藏 视图 中 的 虚拟 键盘 
func hideKeyboardTap (recognizer: UlTapGestureRecognizer) { 
self.view.endEditing (true) 


} 
func showKeyboard (notification: Notification) { 
// 定义 keyboard 大 小 
let rect = notification.userInfo! [UIKeyboardFrameEndUserInfoKey] as! NSValue 
keyboard = rect.cgRectValue 
// 当 唐 拟 键盘 出 现 以 后 ， 将 滚动 视图 的 内 容 高 度 变 为 控制 器 视图 高 度 加 上 键盘 高 度 的 一 半 。 
UIView.animate (withDuration: 0.4) { 
self.scrollView.contentSize.height = self.view.frame.height + self.keyboard.height / 2 


) 


func hideKeyboard (notification: Notification) { 
// 当 虚 拟 键 盘 消 失 后 ， 将 滚动 视图 的 内 容 高 度 值 改变 为 0， 这 样 滚 动 视图 会 根据 实际 内 容 设置 大 小 。 
UIView.animate (withDuration: 0.4) { 
self.scrollView.contentSize.height = 0 
} 
} 


当 用 户 单 击 控制 器 视图 时 会 执行 hideKeyboardTap(recognizer) 方 法 ， 这 里 会 让 虚拟 键盘 消失 。 

当 虚 拟 键盘 消失 的 时 候 会 执行 hideKeyboard(notification:) 方 法 ， 通 过 动画 的 方式 将 滚动 视图 的 contentsize (内 容 空间 大 小 ) 设置 为 0， 这 样 ， 滚 动 视 图 会 根据 实际 内 容 设置 大 小 。 
另外 ， 当 虚拟 键盘 出 现 的 时 候 ， 首 先 会 获取 键盘 的 高 度 值 ， 再 将 滚动 视图 contentSize 的 高 度 增加 键盘 高 度 值 的 一 半 ， 以 显示 所 有 的 内 容 。 

在 获取 键盘 高 度 值 的 时 候 ， 因 为 userlnfo 是 可 选 ， 所 以 先 将 其 强制 拆 包 ， 然 后 再 将 其 转换 为 NSValue 类 型 的 对 象 即 可 。 


构建 并 运行 项 目 ， 在 单 击 电子 邮件 的 Text Field 以 后 便 出 现 了 邮件 地 址 的 输入 键盘 ， 这 时 可 以 上 下 拖 遇 滚动 视图 ， 在 单 击 控制 器 视图 以 后 ， 虚 拟 键盘 消失 ， 如 图 19-15 所 示 。 


运营 商 室 上 午 8:14 -- 


加 50000000 


接 下 来 ， 需 要 实现 在 单 击 avalmg 时 弹出 照片 获取 器 ， 修 改 用 户头 像 的 功能 。 


步骤 1 在 viewDidLoad() 方 法 中 ， 添 加 下 面 的 代码 : 


space 


BN 1 P * 2 


图 19-15 ”滚动 视图 的 运行 效果 


// 单 击 image 


let imgTap = UITapGestureRecognizer (target: self, action: #selector (loadI 


View 


imgTap.numberOfTapsRequired = 1 
avalmg.isUserlnteractionEnabled = true 


avalmg.addGestureRecognizer (imgTap) 


mg) ) 


步骤 2 在 EditVC 的 类 声明 语句 中 添加 两 个 照片 获取 器 相关 的 协议 。 


class EditVC: UlViewController, UIPickerViewDelegate, UlPickerViewDataSource, U 


步骤 3 在 EditVC 中 添加 下 面 的 方法 : 


// 调 出 照片 获 


取 器 选择 照片 


func loadImg (recognizer: UlTapGestureRecognizer) { 


let picker = UIImagePickerController () 


picker.delegate = self 
picker.sourceType = .photoLibrary 
picker.allowsEditing = true 


present (picker, animated: true, completion: nil) 


magePickerControllerDelegate, U 


INavigationControllerDelegate { 


在 该 方法 中 ， 首 先 创建 照片 获取 器 对 象 ， 并 设置 获取 器 的 delegate 属 性 指向 当前 控制 器 。 设 置 从 照片 库 中 获取 照片 ， 并 允许 编辑 照片 。 最 后 将 获取 器 显示 到 屏幕 上 。 


步骤 4 在 EditVC 中 添加 下 面 的 协议 方法 : 


// 关联 选择 好 的 照片 图 像 到 jimage view 


func imagePi 


ckerController( picker: UIImagePickerController, didFinishPicking-MediaWithIn 


avalmg.image = info[UIImagePickerControllerEditedlmage] as? U 


self.dismi 


ss(animated: true, completion: nil) 


} 


当 从 照片 获取 器 中 成 功 得 到 照片 后 ， 会 调用 EditVC 中 的 imagepPickerController( :,didFinishPickingMediaWithlnfo:) 方 法 ， 将 照片 数据 赋值 给 avalmg 属 性 。 


构建 并 运行 项 目 ， 效 果 如 图 19-16 所 示 。 


mage 


in 


Fo: 


[String : 


Any]) 


{ 


图 19-16 ”选择 头像 后 的 效果 


本 章 小 结 


本 章 我 们 创建 了 一 个 全 新 的 用 于 修改 用 户 个 人 配置 信息 的 控制 器 ， 从 在 故事 板 搭建 用 户 界面 ， 代 码 设置 UI 控件 的 布局 ， 到 相关 功能 代码 的 实现 一 气 呵 成 ， 目 的 是 让 读者 可 以 再 次 温习 和 巩固 前 面 学 到 的 
知识 ， 达 到 融会 贯通 的 效果 。 


第 20 草 个 人 配置 负面 数据 的 接收 与 提交 


本 章 我 们 将 处 理 个 人 配置 页 面 数 据 的 接收 和 提交 问题 。 在 正常 情况 下 ， 当 用 户 在 HomeVC 控 制 器 中 单 击 编辑 个 人 主页 按钮 时 ， 会 进入 EditVC 控 制 器 视图 ， 并 在 该 视图 中 呈现 当前 用 户 的 信息 。 


20.1 从 云端 获取 个 人 用 户 信息 


步骤 1 在 EditVC 类 中 添加 新 的 方法 information()。 


// 获取 用 户 信息 
func information() { 
let ava = AVUser.current().object(forKey: "ava") as! AVFile 
ava.getDatalnBackground ( (data: Data?, error: Error?) in 
self.avalmg.image = UlImage (data: data!) 
} 
} 


从 AVUser 类 中 获取 到 AVFile 类 型 的 ava 后 ， 在 后 台 线 程 中 将 云端 _User 数 据 表 中 的 用 户头 像 下 载 到 avalmg 对 象 中 。 


步骤 2 ”在 ava.getDatalnBackground() 方 法 的 后 面 ， 添 加 如 下 代码 : 


// 接收 个 人 用 户 的 文本 信息 

usernameTxt.text = AVUser.current ().username 

fullnameTxt.text = AVUser.current().object(forKey: "fullname") as? String 
bioTxt.text - AVUser.current().object(forKey: "bio") as? String 
webTxt.text = AVUser.current().object(forKey: "web") as? String 
emailTxt.text = AVUser.current().email 

telTxt.text = AVUser.current ().mobilePhoneNumber 

genderTxt.text = AVUser.current().object(forKey: "gender") as? String 


Hh, username, emailff]lmobilePhoneNumberz&AVOSCloud SDK 内 置 的 属性 ， 其 他 是 我 们 之 前 通过 程序 代码 手动 添加 的 属性 。 


步骤 3 在 viewDidLoad() 方 法 中 添加 对 information() 方 法 的 调用 。 


override func viewDidLoad() { 
super.viewDidLoad() 
// 调用 布局 方法 
alignment () 
// 调用 信息 载 入 方法 


information () 


20.2 ”对 Email 和 Web 进 行 正 则 判断 


当 我 们 在 EditVC 页面 修改 好 用 户 信息 以 后 ， 就 应 该 将 信息 数据 提交 到 LeanCloud 云 端的 _ User 表 中 ， 但 在 此 之 前 ， 还 需要 通过 正则 表达 式 对 关键 数据 进行 有 效 性 判断 。 
步骤 1 在 Save clicked( :) 方 法 的 下 面 添 加 validateEmaillemail) 方 法 。 


// 正则 检查 Email 有 效 性 

func validateEmail(email: String) -> Bool ( 

let regex = "NWw[-NNw.-*]*8 ([A-Za-z0-9] [-A-Za-z0-9] -*NN.) - [A-Za-z] (2,14]" 
let range = email.range(of: regex, options: .regularExpression) 

let result = range !- nil ? true : false 

return result 


该 方法 用 于 检查 Email 地 址 是 否 有 效 ， 如 果 有 效 则 返回 true， 否 则 返回 false。 在 检查 Email 地 址 的 时 候 使 用 了 正则 表达 式 ， 它 又 称 正规 表示 式 、 正 规 表达 式 (Regular Expression, RE) ， 在 代码 中 常 简 
写 为 regex、regexp。 正 则 表达 式 使 用 单个 字符 串 来 描述 、 匹 配 一 系列 匹配 某 个 句法 规则 的 字符 串 。 在 很 多 文本 编辑 器 里 ， 正 则 表达 式 通 常 被 用 来 检索 、 奉 换 那 些 匹配 某 个 模式 的 文本 。 


方法 中 的 第 一 行 代码 定义 了 一 个 规则 ，\w (w 小 写 ) 与 任何 单词 字符 匹配 ， 包括” (下划线 ) ， 也 就 相当 于 匹配 所 有 的 字母 (大 小 写 ) 、 数 字 (0-9) 和 _。 注 意 ， 这 里 干 万 不 能 写成 \W (WAS), X 
样 只 会 匹配 非 单词 字符 。 


[表示 匹配 所 包含 的 任意 一 个 字符 。 当 前 代码 中 的 [-\\w.+] 代 表 匹 配 \w、- ( 减 号 ) 、. (点 号 ) 和 + (加 号 ) 中 的 任何 一 个 字符 。[]* 代 表 匹 配 前 一 个 字符 零 次 或 几 次 。 


在 之 后 的 规则 中 继续 匹配 @ 符 号 ， 这 是 Email 的 标志 。 在 @ 的 后 面 是 用 () 配 一 个 模式 ， 该 模式 是 一 个 字母 或 数字 开头 ， 后 面 可 以 跟 一 个 或 多 个 - ( 减 号 ) 、 字 母 、 数 字 和 . (点 号 ) 。 而 这 样 的 一 组 模式 可 
以 是 一 组 或 多 组 ， 因 为 在 括号 的 后 面 跟 了 一 个 +。 


在 规则 的 最 后 [A-Za-z]{2,14 代 表 需 要 匹配 2~14 个 字母 。 


在 上 面 代 码 中 的 规则 字符 串 里 面 ， 我 们 还 使 用 了 “\\”， 这 是 因为 Swift 语言 的 字符 串 会 自动 将 双 引 号 中 的 \ (RRE) 作为 转 义 字符 ， 因 此 需要 使 用 两 个 反 斜 线 来 代表 一 个 真正 字面 量 上 的 反 斜 线 字 


Qi: 正则 表达 式 被 广泛 地 应 用 在 大 多 数 程序 语言 中 ， 它 可 以 帮助 我 们 快速 匹配 需要 检查 或 提取 的 字符 串 内 容 。 关 于 正则 表达 式 的 具体 操作 细节 可 以 利用 百度 搜索 或 查阅 相关 书籍 。 在 网 上 有 很 多 现 
成 的 规则 可 以 直接 使 用 。 


接 下 来 ， 使 用 字符 串 的 range(of:options:) 方 法 进行 规则 匹配 ， 如 果 返 回 值 range 不 为 空 ， 则 代表 email 字 符 串 中 有 该 规则 的 匹配 ， 即 该 字符 串 是 一 个 合格 的 Email 地 址 ， 返 回 true， 和 否则 返回 false。 方 法 
中 的 第 一 个 参数 是 欲 搜索 的 字符 串 ， 它 不 能 为 空 ， 如 果 是 nil 的 话 则 会 抛 出 NSlnvalidArgumentException 异 常 。 第 二 个 参数 是 搜索 选项 ， 这 里 指定 使 用 正则 表达 式 方 式 。 


步骤 2 ”继续 添加 一 个 新 的 方法 ， 用 于 检查 个 人 网 页 的 有 效 性 。 


// 正则 检查 Web 有 效 性 
func validateWeb (web: String) -> Bool ( 


let regex = "wwwNN.[A-Za-z0-9. $4-]4NN. [A-Za-z] (2, 14]"" 
let range = web.range(of: regex, options: .regularExpression) 
let result = range !- nil ? true : false 


return result 


} 


与 Email 检查 类 似 ， 首 先 匹 配 www.， 如 果 . (点 号 ) 直接 出 现在 规则 字符 串 中 的 话 会 代表 除 “n” 之 外 的 任何 单个 字符 ， 所 以 需要 使 用 反 斜 线 将 其 转换 为 字面 量 。 之 后 通过 [A-Za-z0-9. %+-]+ 匹 配 任意 


多 的 规定 字符 集 ， 最 后 要 求 是 . (点 号 ) 加 2~ 14 个 字母 。 
步骤 3 ”继续 添加 新 的 方法 ， 用 于 检查 用 户 的 手机 号 码 。 


// 正则 检查 手机 号 码 有 效 性 

func validateMobilePhoneNumber (mobilePhoneNumber: String) -> Bool { 
let regex = "0?(13/|14/|15/18) [0-9] (9) " 
let range = mobilePhoneNumber.range(of: regex, options: .regularExpression) 
let result = range !- nil ? true : false 

return result 


规则 字符 串 中 ，0 后 面 的 ?代表 匹配 前 面 的 子 表达 式 零 次 或 一 次 。 因 为 在 国内 使 用 固 话 拨打 省 外 手机 号 码 时 需要 在 前 面 加 0， 所 以 可 能 会 出 现 号 码 前 面 加 0 的 情况 。 
步骤 4 在 save_clicked(_:) 方 法 中 添加 下 面 的 代码 : 


// 单 击 保存 按钮 的 实现 代码 
QIBAction func save clicked( sender: AnyObject) { 


if !validateEmail(email: emailTxt.text!) ( 
return 


if !validateWeb (web: webTxt.text!) { 
return 


if !validateMobilePhoneNumber (mobilePhoneNumber: telTxt.text!) { 
return 


如 果 此 时 构建 并 运行 项 目 ， 我 们 是 得 不 到 任何 校 验 信息 反馈 的 ， 所 以 添加 下 面 的 方法 。 


步骤 5 在 EditVC 类 中 添加 alert(error:,message:) 方 法 。 


// 消息 警告 

func alert(error: String, message: String) ( 

et alert = U] [AlertControll er(title: error, message: message, preferredStyle: .alert) 
let ok = UIAlertAction(title: "OK", style: .cancel, handler: nil) 

alert.addAction (ok) 
self.present(alert, animated: true, completion: nil) 


} 


得 之 前 在 SigniInVC 类 或 SignUpVC 类 中 ， 我 们 使 用 上 面 方法 中 的 代码 弹出 错误 警告 对 话 框 吗 ? 这 里 我 们 将 它 封装 到 一 个 方法 中 以 便 重 复 使 用 。 


步骤 6 在 save_clicked( :方法 中 添加 对 校 验 失败 的 错误 警告 。 


QIBAction func save clicked( sender: AnyObject) { 
// 如 果 是 错误 的 Email 地 址 

if !validateEmail(email: emailTxt.text!) ( 
alert (error: "错误 的 Email 地 址 "，message: "请 输入 正确 的 电子 邮件 地 址 ") 
return 


} 

// 如 果 是 错误 的 网 页 地 址 

if lvalidateWeb (web: webTxt.text!) { 
alert(error: "错误 的 网 页 链接 "，message: "请 输入 正确 的 网 址 ") 
return 


} 

// 如 果 是 错误 的 手机 号 码 

if !telTxt.text!.isEmpty { 

f !'validateMobilePhoneNumber (mobilePhoneNumber: telTxt.text!) { 
alert (error: "错误 的 手机 号 码 "，message: "请 输入 正确 的 手机 号 码 ") 
return 

} 
} 
} 


EE 


Qi 除了 在 EditVC 类 中 可 以 复 用 alert(ertrot:message;) 方 法 以 外 ， 还 可 以 在 SignInVC 和 SignUpVC 类 中 添加 该 方法 ， 然 后 对 代码 进行 适当 修改 ， 从 而 减少 代码 量 ， 提 高 可 读 性 。 


20.3 ”发 送信 息 到 服务 器 


接 下 来 ， 我 们 需要 将 用 户 修改 后 的 信息 发 送 到 LeanCloud 云 端的 _User 数 据 表 中 。 


步骤 1 在 save_clicked(_:) 方 法 的 结尾 处 ， 添 加 下 面 的 代码 : 


// 保存 Field 信 息 到 服务 器 中 
let user = AVUser.current () 

user?.username = usernameTxt.text?.lowercased() 
user?.email = emailTxt.text?.lowercased() 
user?["fullname"] = fullnameTxt.text?.lowercased() 
user?["web"] = webTxt.text?.lowercased() 
user?["bio"] = bioTxt.text 


在 这 段 代 码 中 ， 我 们 首先 获取 了 当前 用 户 的 数据 信息 ， 然 后 将 视图 中 各 个 Field 控 件 的 文本 信息 赋值 到 AVUser 对 象 的 相应 属性 中 。 这 里 有 些 使 用 的 是 下 标 形式 ， 因 为 fullname、web 和 bio 并 不 是 


AVUser 内 置 的 用 户 属性 ， 但 是 可 以 通过 下 标的 形式 将 信息 写 到 User 表 的 相应 字段 中 。 


步骤 2 ”在 步骤 1 代码 的 下 面 ， 继 续 添加 如 下 代码 : 


// 如 果 tel 为 室 ， 则 发 送 "给 mobilePhoneNumiber 字 段 ， 否 则 传 入 信息 
if telTxt.text!.isEmpty { 
user?.mobilePhoneNumber = "" 
Jelse { 
user? .mobilePhoneNumber telTxt.text 


} 
// 如 果 gender 为 空 ， 则 发 送 "" 给 gender 字 段 ， 否 则 传 入 信息 
if genderTxt.text!.isEmpty 1 
user? ["gender"] — "nn 
}else { 
user?["gender"] = genderTxt.text 


} 


如 果 telTxt 中 的 内 容 不 为 空 ， 则 将 值 赋值 给 AVUser 对 象 的 mobilePhoneNumber 属 性 ， 否 则 将 其 设置 为 空 字符 串 。 注 意 ， 这 里 的 "代表 是 字符 串 对 象 ， 只 不 过 该 对 象 是 没有 字符 的 字符 串 ， 它 与 nil 有 本 


质 的 区 别 。 
因为 mobilePhoneNumber 是 AVUser 内 置 的 属性 ， 而 gender 不 是 ， 所 以 在 赋值 方式 上 有 所 区 别 。 


步骤 3 ”在 步骤 2 的 代码 下 面 ， 继 续 添加 如 下 代码 : 


// 发 送 用 户 信 息 到 服务 器 
user?.save] FnBackground(i (success:Bool, error:Error?) in 
if success { 
// 隐藏 键盘 
elf.view.endEditing (true) 
// 退出 EditVC 控 制 器 
self.dismiss (animated: true, completion: nil) 
Jelse { 
print (error?.localizedDescription) 
} 
}) 


当 用 户 数据 准备 好 以 后 ， 就 可 以 利用 AVUser 的 savelnBackground() 方 法 ， 在 后 台 线 程 中 将 用 户 数据 提交 到 LeanCloud 云 端的 _User 数 据 表 中 。 如 果 提 交 成 功 则 隐藏 键盘 ， 并 退出 当前 控制 器 ， 
试 控制 台中 打印 错误 信息 。 


四 注意 从 Xcode 8 beta 4 开始 ， 凡 是 AVOSCloud SDK 的 API 方 法 中 涉及 闭 包 中 包含 NSEtrror 类 型 参数 的 情况 ， 我 们 都 需要 将 其 修改 为 Error 类 型 ， 否 则 编译 无 法 通 


构建 并 运行 项 目 ， 当 在 个 人 主页 单 击 编辑 个 人 主页 以 后 会 进入 到 新 创建 的 页 面 ， 若 输入 无 效 的 Email 地 址 、 网 址 或 手机 号 码 ， 则 会 弹出 警告 对 话 框 ， 如 图 20-1 所 示 。 


否则 在 调 


错误 的 Email 地 址 
请 输入 正确 的 电子 名 件 地 址 


OK 


图 20-1 提交 无 效用 户 信息 时 的 警告 对 话 杠 


20.4 ”更 新 个 人 主页 信息 


当 我 们 确保 用 户 信息 输入 无 误 以 后 ， 可 以 单 击 保存 。 但 是 所 修改 的 内 容 并 没有 更 新 在 用 户 的 个 人 主页 界面 中 ， 接 下 来 需要 解决 这 个 问题 。 


步骤 1 在 EditVC 类 的 save_clicked(_:) 方 法 中 ， 当 用 户 信息 被 成 功 提 交 到 云端 服务 器 以 后 ， 利 用 NotificationCenter 类 发 送 一 个 通知 。 


// 发 送 用 户 信 息 到 服务 器 
user?.savelnBackground(( (success:Bool, error:NSError?) in 
if success { 


NotificationCenter.default.post(name: NSNotification.Name (rawValue: "reload"), object: nil) 


) 
这 里 使 用 post(name:object:) 方 法 发 送 通知 。 第 一 个 参数 是 通知 名 称 ， 它 必须 是 NSNotification.Name 类 型 。 第 二 个 参数 是 在 发 送 通 知 时 所 推 带 的 参数 ， 使 用 nil 即 可 。 


步骤 2 ”在 HomeVC 类 中 的 viewDidLoad() 方 法 中 添加 下 面 的 代码 : 


override func viewDidLoad() { 
super.viewDidLoad() 


// 从 EditVC 类 接收 Notification 
NotificationCenter.default.addObserver(self, selector: #selector (reload (notif-ication:)), name: NSNotification.Name(rawValue: "reload"), object: nil) 


loadPosts () 


当 EditVC 发 送 reload 通 知 以 后 ， 需 要 在 HomeVC 里 面 接收 这 个 通知 ， 然 后 刷新 集合 视图 。 


步骤 3 ”在 HomeVC 类 中 添加 新 的 方法 。 


func reload(notification: Notification) { 
collectionView?.reloadData () 


} 


构建 并 运行 项 目 ， 在 个 人 主页 编辑 界面 中 修改 用 户 信息 ， 单 击 保存 后 便 会 在 HomeVC 中 看 到 修改 后 的 用 户 信息 ， 如 图 20-2 所 示 。 


本 章 小 结 


本 章 我 们 实现 了 个 人 编辑 控制 器 与 LeanCloud 云 端 数据 的 交互 功能 ， 其 中 使 用 了 正则 表达 式 对 三 个 重要 的 信息 (电子 邮件 、 电 话 号 码 和 网 址 ) 进行 校 验 。 使 用 正则 表达 式 可 以 高 效 简洁 地 对 关键 数据 进 
行 有 效 性 检查 ， 这 是 作为 程序 员 必要 掌握 的 一 项 技能 。 
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图 20-2 ”在 EditVC 中 修改 用 户 信息 后 会 被 实时 更 新 到 HomeVC 界 面 中 


第 21 章 ”实现 帖子 上 传 功能 


从 本 章 开 始 ， 我 们 要 完成 Instagram 用 户 的 帖子 上 传 功 能 ， 这 样 就 可 以 随时 随地 将 照片 保存 到 LeanCloud 云 端 了 。 


21.1 在 故事 板 中 创建 上 传 用 户 界 面 


步骤 1 在 项 目 导 航 中 打开 Main.storyboard 故 事 板 ， 从 对 象 库 中 拖 遇 一 个 新 的 View Controller 到 HomeVC 控 制 器 的 下 方 ， 从 菜单 中 选择 Editor 一 Embed In 一 Navigation Controller， 如 图 21-1 所 


步骤 2 ”在 故事 板 中 按 住 control 键 ， 然 后 从 TabBarController 拖 电 鼠 标 到 新 创建 的 Naviga-tion Controller。 从 弹出 的 选项 面板 中 选择 RelationShip Segue 一 View Controller， 如 图 21-2 所 示 。 


图 21-1 在 故事 板 中 添加 一 个 新 的 View Controller 


O Meester 0000 
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Manual Segue 
Show 
Show Detail 
Present Modally 
Present As Popover 
Custom 
Relationship Segue 
view controllers 
Non-Adaptive Manual Segue 
Push (deprecated) 
Modal (deprecated) 


Navigation Controller 


图 21-2 为 标签 控制 器 和 新 创建 的 导航 控制 器 建立 关联 
此 时 ， 标 签 栏 控制 器 已 经 包含 了 两 个 子 视图 控制 器 ， 一 个 用 于 显示 个 人 主页 信息 ， 一 个 用 于 帖子 的 上 传 。 如 果 你 仔细 观察 Tab Bar Controller 的 话 ， 会 发 现 位 于 底部 的 ltem 变 成 了 两 个 。 


步骤 3 ” 拖 岛 1 个 Image View 到 视图 之 中 ， 在 Size Inspector 中 将 width 和 height 均 设置 为 900。 再 拖 岛 1 个 Text View 到 Image View 的 右 侧 ， 高 度 与 Image View 相 等 ， 删 除 其 中 的 文字 内 容 ， 并 设置 
Background 为 Group Table View Background Color， 如 图 21-3 所 示 。 


UllmadgeView 


图 21-3 ”添加 Image View 和 Text View4z fF 


步骤 4 再 拖 遇 1 个 Button 到 视图 的 底部 ， 修 改 其 宽度 与 控制 器 视图 相等 ， 高 度 为 40。 在 Attributes Inspector 中 将 Text Color 和 Shadow Color 均 设置 为 White Color， 将 Background 设 置 为 蓝 色 ， 如 
图 21-4 所 示 。 将 按钮 的 title 设 置 为 发 布 。 
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图 21-4 设置 按钮 属性 


接 下 来 ， 我 们 需要 为 Image View 提 供 一 张 默认 图 片 。 


步骤 5 将 资源 文件 夹 中 的 pbg.jpg 文 件 拖 岛 到 项 目 之 中 ， 确 保 勾 选 了 Copy items if needed 选 项 ， 故 事 板 中 将 Image View 的 Image 设 置 为 pbg.jpg。 另 外 ， 将 HomeVC 和 GuestVC 中 ， 集 合 视图 的 单 


元 格 里 面 的 Image View 的 Image 也 设置 为 pbg.jpg。 


21.2 创建 上 传 控制 器 代码 类 


又 1 在 项 目 导 航 中 创建 一 个 新 的 Cocoa Touch Class, Subclass of 为 UIViewController，Class 为 UploadVC。 


| 


SE 


步骤 2 在 故事 板 中 选中 新 创建 的 控制 器 ， 在 ldentity Inspector 中 将 Class 设 置 为 刚刚 创建 的 UploadVC。 


步骤 3 ”为 视图 中 的 控件 元 素 创 建 3 个 Outlet 关 联 : piclmg (Image View) 、titleTxt (Text View) 和 publishBtn (Button) 。 


class UploadVC: UlViewController { 
// UI objects 
GIBOutlet weak var picImg: UIImageView! 

GIBOutlet weak var titleTxt: UITextView! 
GIBOutlet weak var publishBtn: UIButton! 


步骤 4 在 UploadVC 类 中 添加 alignment() 方 法 。 


// 界面 元 素 对 齐 

func alignment() { 
let width = self.view.frame.width 

picImg.frame = CGRect(x: 15, y: self.navigationController!.navigationBar.frame.height + 35, width: width / 4.5, height: width / 4.5) 
titleTxt.frame = CGRect (x: piclImg.frame.width + 25, y: piclImg.frame.origin.y, width: width - titleTxt.frame.origin.x - 10, height: picimg.frame.height) 
publishBtn.frame = CGRect(x: 0, y: self.tabBarController!.tabBar.frame.origin.y - width / 8, width: width, height: width / 8) 

) 


在 该 方法 中 ， 首 先 还 是 获取 到 屏幕 视图 的 宽度 。piclmg 的 y 值 是 当前 控制 器 导航 栏 的 高 度 加 35， 因 为 Image View 的 位 置 是 相对 于 控制 器 视图 而 言 的 ， 而 导航 栏 也 在 该 视图 之 中 ， 所 以 需要 让 y 的 值 为 


self.navigationController!l.navigationBar.frame.height+35， 这 个 35 点 包括 了 顶部 状态 栏 的 高 度 以 及 Image View 与 导航 栏 的 间隔 。Image View 的 宽度 和 高 度 均 为 屏幕 宽度 的 4.5 分 之 一 。 
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titleTxt 的 x 值 是 piclmg 向 右 25，y 值 与 piclmg 一 致 。 而 titleTxt 的 宽度 是 屏幕 宽度 减 去 titleTxt 的 x 值 ， 再 减 去 与 右边 缘 的 距离 10。 
publishBtn 的 y 值 是 标签 栏 的 y 值 向 上 减 去 按钮 的 高 度 ， 按 钮 的 高 度 则 是 控制 器 视图 宽度 的 八 分 之 一 。 


步骤 5 ”在 viewDidLoad() 方 法 中 ， 添 加 对 alignment() 方 法 的 调用 。 


override func viewDidLoad() { 
super.viewDidLoad() 
alignment () 


) 


在 用 户 界面 相关 代码 完成 以 后 ， 就 该 实现 上 传 的 功能 代码 。 


.3 实现 照 睛 获取 器 的 相关 代码 


在 UploadVC 中 ， 需 要 借助 照片 获取 器 从 照片 库 中 得 照片 ， 然 后 再 将 其 上 传 到 LeanCloud 云 端 。 


步骤 1 在 viewDidLoad() 方 法 中 添加 下 面 的 代码 : 


override func viewDidLoad() { 
super.viewDidLoad() 
// 默认 状态 下 禁用 publishBtn 按钮 
publishBtn.isEnabled = false 
publishBtn.backgroundColor = .lightGray 


步骤 2 ”接着 上 面 的 代码 继续 添加 : 


override func viewDidLoad() { 
// Xd Image View 
let picTap = UlTapGestureRecognizer(target: self, action: #selector (selectImg)) 
picTap.numberOfTapsRequired = 1 
self.piclImg.isUserInteractionEnabled = true 
self.piclImg.addGestureRecognizer (picTap) 
alignment () 


步骤 3 在 UploadVC 类 声明 中 添加 与 照片 获取 器 相关 的 两 个 协议 声明 ， 并 添加 selectlimg() 方 法 。 


一 


class UploadVC: UlIViewController, UlIImagePickerControllerDelegate, UINavigation-ControllerDelegate 


func selectimg() { 
let picker = UIImagePickerController () 
picker.delegate self 
picker.sourceType = .photoLibrary 
picker.allowsEditing = true 
present(picker, animated: true, completion: nil) 


在 该 方法 中 ， 创 建 了 一 个 照片 获取 器 ， 设 置 当前 的 UploadVC 类 为 获取 器 的 委托 对 象 ， 指 定 获 取 手 机 中 照片 库 中 的 照片 并 允许 编辑 照片 ， 最 后 将 其 呈现 到 屏幕 上 。 


步骤 4 接 下 来 ， 实 现 UllmagePickerControllerDelegate 协 议 中 的 方法 : imagePickerController( :didFinishPickingMediaWithlInfo:), 


// 将 选择 的 照片 放 入 picImg， 并 销毁 照片 获取 器 
func imagePickerController( picker: UllImagePickerController, didFinishPicking-MediaWithInfo info: [String : Any]) { 
picimg.image = info[UIImagePickerControllerEditedlImage] as? UIImage 


true, compl 


etion: nil) 


self.dismiss (animated: 

// 允许 publish btn 
publishBtn.isEnabled = true 
publishBtn.backgroundColor = U 


在 该 方法 中 ， 


步骤 5 在 imagePickerController( :didFinishPickingMediaWithinfo:) 方 法 中 ，publishBtn 按 钮 设置 代码 的 下 面 ， 


A 一 


// 实现 第 二 RE A 


let zoomTap = 


UITapGestureRecognizer (target: 


IColor 


后 ， 接 下 来 是 让 发 布 按钮 生效 ， 并 且 给 按钮 设 


self 


zoomTap.numberOfTapsRequired = 1 


tionE 


picimg.isUserInterac 


pic] 


nabled = true 
[mg .addGestureRecognizer (zoomTap) 


当 用 户 单 击 Image View 以 后 ， 我 们 希望 可 以 放大 照片 


步骤 6 在 UploadVC 类 中 ， 添 加 新 的 方法 zoomlmg()。 


(red: 52.0 / 255.0, green: 


; action: 


BOE 景色 。 


#selector (zoomImg)) 


169.0 / 255.0, blue: 255.0 / 255.0, alpha: 1) 


继续 添加 代码 : 


通过 info 字 典 中 的 UlImagepPickerControllerEditedlmage 键 获取 到 用 户 编辑 后 的 照片 ， 并 将 其 转换 为 Ullmage 类 型 的 对 象 赋值 给 piclmg， 然 后 销毁 照片 获取 器 。 


// 放大 或 缩小 照片 
func zoomimg() { 

// dt AE 1 [mage View 的 位 置 
let zoomed = CGRect (x: 0, y: 
// Image Vint nE 


let unzoomed - CGRect(x: 15, 


self 


y: self.navigationContro] 


.View.center.y - self 


.View.center.x, 


ler!.navigationBar. 


width: 


self 


.View. 


frame.height + 35, width: 


frame.width, height: 


sel 


f.view. 


.View. 


self 


frame.width) 


frame.width / 4.5, height: 


sel 


.View. 


frame.width / 4.5) 


当 用 户 单 击 Image View 以 后 ， 该 Image View 会 通 


步骤 7 ”在 zoomlmg() 方 法 中 继续 添加 新 的 代码 : 


甬 过 动画 的 方式 放大 ， 这 里 我 们 将 它 的 大 小 和 位 置 设置 为 边 长 为 屏幕 宽度 的 正方 形 ， 并 且 将 Image View 垂 直 居中 。 


// 如 果 Image View 是 初始 大 小 


if piclImg.frame == unzoomed { 

UIView.animate (withDuration: 0.3, animations: { 
self.piclImg.frame = zoomed 
self.view.backgroundColor = .black 
self.titleTxt.alpha = 0 
self.publishBtn.alpha = 0 

)) 

// 如 果 是 放大 后 的 状态 
Jelse ( 

UIView.animate (withDuration: 0.3, animations: { 
self .Pic] [mg. frame = unzoomed 
self.view.backgroundColor = .white 
self.titleTxt.alpha = 1 
self.publishBtn.alpha = 1 

)) 

} 
当 用 户 单 击 Image View 以 后 ,会 判断 


的 alpha 值 设置 为 0， 让 其 不 可 见 。 


它 当前 的 大 小 和 位 置 ， 如 果 是 初始 大 小 则 通 


前 过 动画 的 方式 将 Image View 的 frame 设 置 为 zoomed， 并 且 还 将 控制 器 视图 的 背景 


设置 为 黑色 ，titleTxt 和 publishBtn 


构建 并 运行 项 目 ， 在 UploadVC 界 面 中 ， 初 始 状态 下 发 布 按钮 是 无 效 的 ， 当 选择 好 照片 以 后 ， 按 钮 生效 ， 当 单 击 Image View 的 时 候 ， 照 片 会 放大 ， 再 次 单 击 以 后 有 会 回 到 初始 状态 ， 如 图 21-5 所 示 。 
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图 21-5 
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21.4 实现 上 传 的 相 天 代码 


接 下 来 ， 我 们 需要 实现 当 用 户 单 击发 布 按钮 以 后 上 传 照片 到 LeanCloud 云 端的 功能 。 
步骤 1 将 Xcode 切 换 到 助手 编辑 器 模式 ， 为 UploadVC 的 发 布 按钮 建立 Action 关 联 ， 方 法 名 称 : publishBtn_clicked。 


步骤 2  f£publishBtn clicked( :) 方 法 中 添加 下 面 的 代码 : 


// 隐藏 键盘 
self.view.endEditing (true) 
let object = AVObject(className: "Posts") 


object?["username"] = AVUser.current ().username 
object?["ava"] = AVUser.current().value(forKey: "ava") as! AVFile 
object?["puuid"] = "NX(AVUser.current().username!) N(NSUUID().uuidString)" 


在 该 方法 中 ， 首 先 让 键盘 消失 ， 然 后 初始 化 一 个 AVObject 对 象 ， 用 于 操作 LeanCloud 云 端的 Posts 数 据 表 。 为 表 中 的 username、ava 和 puuid 字 段 赋值 ， 其 中 puuid 字 段 的 格式 是 : 当前 用 户 的 
Username+ 空 格 +NSUUID 的 字符 串 格 式 ， 形 如 "liuming 247387428013928743767" , 


步骤 3  f£publishBtn clicked( :) 方 法 中 继续 添加 下 面 的 代码 : 


if titleTxt.text.isEmpty { 
object?[" title"] = "n" 


object? ["title"] titleTxt.text.trimmingCharacters (in: CharacterSet.whitespaces-AndNewlines) 


需要 说 明 的 是 ， 当 titleTxt 不 为 空 的 时 候 ， 需 要 对 text 字 符 串 进行 整理 ， 去 掉 其 两 端的 空格 和 回 车 换行 符 ， 这 样 可 以 保证 title 文 本 的 干净 整洁 。 


string 类 中 的 trimmingCharacters(in:) 方 法 用 于 过 滤 字 符 串 中 的 特殊 符号 ，Characterset 用 于 创建 指定 的 字符 集 ， 当 字符 串 的 两 端 售 有 Characterset 所 定义 的 字符 ， 就 会 将 其 删除 。 比 如 


var str = "Hello, playground!" 
let set = CharacterSet(charactersIn: "!8/:;()$,") 
str.trimmingCharacters (in: set) 


这 里 我 们 为 “!@/:;0$,” 字 符 创建 了 字符 集 ， 对 str 字 符 串 执行 了 trimmingCharacters(in:) 方 法 ， 因 为 定义 的 字符 集中 有 !， 所 以 新 生成 的 字符 串 中 只 有 Hello,playground 了 。 
当然 ， 除 了 用 户 自己 定义 字符 集 以 外 ，CharacterSet 类 还 为 我 们 预定 义 了 很 多 特殊 类 型 : 

- whitespacesAndNewlines: 空格 和 换行 符 。 

 whitespaces: 空格 符 。 

.newlines: 换行 符 。 

: letters: 字符 。 

: decimalDigits: 数字 。 

: alphanumetics: 字符 和 数字 。 


步骤 4  f£publishBtn clicked( :) 方 法 中 继续 添加 下 面 的 代码 : 


// 生成 照片 数据 
let imageData = UIImageJPEGRepresentation (piclImg.image!, 0.5) 
let imageFile = AVFile(name: "post.jpg", data: imageData) 
object?["pic"] = imageFile 


这 里 将 Image View 中 的 image 转 换 为 Data 形 式 ， 并 生成 AVFile 类 型 的 对 象 。 
步骤 5 在 publishBtn_clicked(_:) 方 法 中 继续 添加 下 面 的 代码 ， 完 成 数据 的 存储 。 


// 将 最 终 数据 存储 到 LeanCloud 云 端 

object?.saveInBackground({ (success:Bool, error:Error?) in 

if error == nil { 
// 发 送 uploaded 通知 
NotificationCenter.default.post(name: NSNotification.Name(rawValue: "uploaded"), object: nil) 
// 将 TabBar 控 制 器 中 索引 值 为 0 的 子 控制 器 ， 显 示 在 手机 屏幕 上 。 


self.tabBarController!.selectedIndex = 0 


AVObject 类 的 savelnBackground( :) 方 法 用 于 后 台 存 储 数据 ， 当 success 为 true 或 者 是 errom 为 nil 的 时 候 代 表 数 据 成 功 存储 到 LeanCloud 云 端的 Posts 数 据 表 中 。 此 时 ， 会 发 送 一 个 uploaded 通 知 完成 之 
后 的 任务 ， 并 且 这 里 还 要 让 TabBar 控 制 器 切换 到 第 一 子 控制 器 (索引 值 是 从 0 开始 的 ) ， 也 就 是 个 人 主页 的 控制 器 界面 。 


构建 并 运行 项 目 ， 当 添加 照片 后 单 击发 布 按钮 ， 数 据 会 上 传 到 LeanCloud 云 端 数据 表 ， 而 且 控 制 器 会 被 切换 到 个 人 主页 界面 。 但 是 ， 新 添加 的 照片 数据 并 没有 被 呈现 出 来 ， 如 图 21-6 所 示 。 
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21.5 ”在 个 人 主页 刷新 集合 视图 


在 UploadVC 类 的 publishBtn_clicked(_:) 方 法 中 ， 当 成 功 保存 用 户 信息 到 LeanCloud 云 端的 Posts 表 以 后 ， 会 广播 uploaded 通 知 ， 在 TabBar 切 换 到 个 人 主页 界面 的 时 候 ， 需 要 捕获 该 通知 并 进行 集合 视 
图 的 刷新 。 


步骤 1 在 HomeVC 类 中 的 viewDidLoad() 方 法 中 添加 下 面 的 代码 : 


override func viewDidLoad() { 
super.viewDidLoad() 
// 从 UploadVC 类 接收 Notification 
NotificationCenter .default.addObserver (self, selector: #selector (uploaded (notification:)), name: NSNotification.Name (rawValue: "uploaded"), object: nil) 
loadPosts () 


步骤 2 在 HomeVC 类 中 添加 uploaded(notification:) 方 法 。 


// 在 接收 到 uploaded 通 知 后 重新 载 入 posts 

func uploaded (notification: Notification) { 
loadPosts () 

} 


构建 并 运行 项 目 ， 在 成 功 上 传 照片 帖子 以 后 ，App 会 切换 到 个 人 主页 界面 ， 并 在 集合 视图 中 完美 呈现 新 上 传 的 照片 ， 如 图 21-7 所 示 。 


如 果 在 你 的 模拟 器 中 所 呈现 的 集合 视图 ， 它 的 单元 格 都 是 分 离 的 话 ， 如 图 21-8 所 示 ， 请 按照 下 面 的 方式 解决 : 
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图 21-7 帖子 成 功 上 传 后 在 个 人 主页 中 的 数据 更 新 


I ERES 上 午 5:03 E 
LIUMING X 


刘 多 


www.liuming.cn 


iOS 开 发 程序 员 ， 


Item Item 


图 21-8 集合 视图 单元 格 分 离 的 情况 
在 故事 板 中 的 HomeVC 控 制 器 中 选中 集合 视图 ， 在 Size Inspector 中 将 Min Spacing 的 For Cells 和 For Lines 均 设置 为 0 即 可 ， 如 图 21-9 所 示 。 另 外 ， 对 GuestVC 控 制 器 的 集合 视图 也 执行 相同 的 操作 。 
> 图 sign Invc Scene 
> 图 Sign UpvC Scene 
> 图 Reset PasswordVC Scene 


> 图 Tab Bar Controller Scene 


(f. Collection View Flow Layout 
图 21-9 ”故事 板 中 调整 集合 视图 的 Min Spacing/É PE 


21.6 ” 移 除 上 传 页 面 中 的 照片 


接 下 来 ， 我 们 需要 为 UploadVC 添 加 移 除 所 选 照 片 的 功能 。 


步骤 1 故事 板 中 从 对 象 库 拖 遇 一 个 Button 到 UploadVC 控 制 器 视图 的 Image View 的 下 方 。Title 设 置 为 移 除 ， 字 号 设置 为 13， 如 图 21-10 所 示 。 


图 21-10 ”为 上 传 页 面 添 加 移 除 按钮 


步骤 2 将 Xcode 切换 到 助手 编辑 器 模式 ， 为 该 按钮 添加 Outlet 和 Action 关 联 。 


// 移 除 按钮 的 Outlet 关 联 


QIBOutlet weak var removeBtn: UIButton! 


// 移 除 按钮 的 Action 关 联 
aI 


[BAction func removeBtn clicked( sender: AnyObject) { 


) 


步骤 3 在 viewDidLoad() 方 法 中 添加 下 面 的 代码 : 


overri 


de func viewDidLoad() { 


// 隐藏 移 除 按钮 


removeBtn.isHidden 


— true 


只 有 在 用 户 选择 好 照片 以 后 ， 移 除 按钮 才 真 正 有 意义 。 所 以 在 控制 器 初始 化 的 时 候 先 将 其 隐藏 。 


步骤 4 ”在 imagePickerController( :didFinishPickingMediaWithlnfo:) 方 法 中 显示 移 除 按 钮 。 


func i 


magePickerCont 


roller( picker: UlImagePickerController, didFinishPicking-MediaWithInfo info: [String : AnyObject]) { 


picimg.image = info[UIImagePickerControllerEditedImage] as? UIImage 
self.dismiss (animated: true, completion: nil) 


// 显示 移 除 按钮 


removeBtn.isHidden 


— false 


当 用 户 选择 好 照片 以 后 则 显示 移 除 按钮 。 


步骤 5 在 alignment() 方 法 中 设置 移 除 按钮 的 位 置 和 大 小 。 


func alignment() { 


removeBtn.frame = 


} 


CGRect(x: piciImg.frame.origin.x, y: picImg.frame.origin.y + picl 


[mg. 


frame.height, width: picI 


.frame.width, height: 30) 


这 里 设置 按钮 的 x 值 与 piclmg 一 致 ，y 值 为 piclmg 当 前 的 y 值 加 piclmg 的 高 度 值 ， 宽 度 与 piclmg 一 致 。 


构建 并 运行 项 目 ， 效 果 如 图 21-11 所 示 。 在 选择 照片 之 前 移 除 按钮 处 于 隐藏 状态 ， 当 选择 好 照片 后 移 除 按钮 出 现 。 


图 21-11 添加 移 除 按钮 后 的 显示 效果 


细心 的 朋友 会 发 现 ， 当 成 功 上 传 照片 以 后 ，UploadVC 控 制 器 视图 中 还 保留 着 之 前 的 上 传 数据 信息 ， 接 下 来 我 们 就 修复 这 个 Bug。 


步骤 6 在 viewDidLoad() 方 法 中 ， 添 加 下 面 的 代码 : 


override func viewDi 


dLoad() { 


super.viewDidLoad() 


// 让 UI 控 件 回 到 初始 状态 


pic] 
tit] 


[mg.image = U 
leTxt.text = "" 


mage (named: "pbg.jpg") 


步骤 7 ”在 publishBtn_clicked(_:) 方 法 的 数据 保存 部 分 ， 添 加 对 viewDidLoad() 方 法 的 调用 。 


QIBAction func publishBtn clicked( sender: AnyObject) { 


// 将 最 终 数据 存储 Z|LeanCloudz 35 


object?.savelnBackground(( (success:Bool, error:NSError?) in 


if 


error == nil 


} 
}) 


// reset 一 切 


{ 


self.viewDidLoad() 


当 数 据 成 功 保存 以 后 ， 会 调用 viewDidLoad() 方 法 重 置 所 有 ， 因 为 是 在 闭 包 中 调用 类 中 的 方法 ， 所 以 要 使 用 self.。 


步骤 8 在 removeBtn_clicked( :) 方 法 中 添加 一 行 代码 : 


QIBAction func removeBtn clicked( sender: AnyObject) { 
self.viewDidLoad() 


} 


构建 并 运行 项 目 ， 上 传 页 面 的 所 有 功能 完美 实现 。 


本 章 小 结 


本 章 内 容 较 多 ， 利 用 之 前 学 过 的 各 种 技能 实现 了 文本 和 图 片 内 容 上 传 到 LeanCloud 云 端 数据 表 之 中 。 在 iOs 平 台 上 面 ， 我 们 一 般 都 会 通过 照片 获取 器 得 到 用 户 选择 的 照片 ， 通 过 Text View 上 传 文本 信 
息 ， 但 是 在 本 章 的 实战 练习 中 ， 我 们 利用 了 trimmingCharacters(in:) 方 法 过 滤 了 特殊 符号 ， 这 个 操作 是 非常 有 必要 的 。 


第 22 章 ”实现 分 页 载 入 功能 


当 Instagram 应 用 具有 了 帖子 上 传 功 能 后 ， 用 户 便 可 以 随意 的 从 真 机 或 模拟 器 的 照片 库 中 上 传 美 照 了 。 但 是 ， 如 果 在 你 上 传 了 12 张 以 上 的 照片 后 就 会 发 现 ， 当 前 的 HomeVC 集 合 视 图 中 ， 最 多 只 能 显示 
12 张 帖子 的 照片 。 


原因 是 在 HomeVC 类 中 定义 了 page 属 性 ， 它 的 初始 值 为 12， 并 且 在 loadPosts() 方 法 中 ， 我 们 将 page 赋 值 给 查询 变量 query 的 limit 属 性 。 
query?.limit = page 


这 也 就 相当 于 不 管 query 如 何 查询 ， 它 只 能 获取 到 page 指 定数 量 的 记录 。 本 章 我 们 将 会 解决 这 个 问题 ， 让 用 户 在 浏览 集合 视图 的 时 候 ， 每 次 都 载 入 指定 数量 的 记录 。 


22.1 为 HomeVC 实 现 分 页 载 入 功能 


步骤 1 在 HomeVC 类 中 添加 新 的 协议 方法 。 


override func scrollViewDidScroll(  scrollView: UIScrollView) { 
if scrollView.contentOffset.y >= scrollView.contentSize.height - self.view.frame.height { 
self.loadMore|() 


} 
} 


scrollViewDidScroll( :) 方 法 是 UlScrollViewDelegate 所 定义 的 协议 方法 ， 当 前 的 HomeVC 继 承 于 UICollectionViewController (集合 视图 ) ， 所 以 自然 而 然 也 符合 Scroll View (滚动 视图 ) 的 相关 协 
议 。 当 用 户 滚动 集合 视图 的 时 候 ， 我 们 可 以 通过 该 方法 获取 到 Content View (滚动 视图 中 的 内 容 视图 ) 的 偏 移 量 ， 如 图 22-1 所 示 。 
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图 22-1 滚动 视图 中 的 ContentView、ContentOffset 和 Frame 


图 22-1 中 位 于 顶部 的 图 的 相当 于 用 户 可 见 区 域 的 集合 视图 ， 它 的 大 小 和 位 置 就 是 Scroll View 的 Frame 属 性 。 底 部 的 图 相当 于 集合 视图 内 部 所 显示 的 全 部 内 容 ， 相 当 于 Scroll View 的 Content View, R 
不 过 在 屏幕 上 对 于 用 户 真正 可 见 的 仪 仪 是 被 顶部 区 域 庶 盖 的 部 分 。 


用 户 可 以 通过 手指 的 上 下 移动 让 集合 视图 垂直 滚动 ， 而 在 滚动 过 程 中 我 们 可 以 通过 Scroll View 的 ContentOffset.y 属 性 ， 随 时 得 到 垂直 偏 移 量 。 视 图 向 上 滚动 偏 移 量 增加 ， 视 图 向 下 滚动 偏 移 量 减少 。 


当 偏 移 量 大 于 等 于 滚动 视图 的 contentsize 的 高 度 (Content View 的 高 度 ) 减 去 当前 控制 器 的 高 度 ， 也 就 意味 着 此 时 的 Content View 已 经 被 移动 到 了 底部 ， 这 样 就 可 以 调用 loadMore() 方 法 ， 从 
LeanCloud 云 端 载 入 更 多 的 帖子 了 。 


步骤 2 在 HomeVC 中 添加 一 个 新 的 方法 。 


func loadMore() { 
if page <= picArray.count { 
page = page + 12 
let query = AVQuery(className: "Posts") 
query? .whereKey ("username", equalTo: AVUser.current().username) 
query?.limit = page 
query?.findObjectsInBackground(( (objects:[Any]?, error:Error?) in 
// 查询 成 功 
if error == nil { 
// 清空 两 个 数组 
self.puuidArray.removeAll(keepingCapacity: false) 
self.picArray.removeAll(keepingCapacity: false) 
for object in objects! { 
// 将 查询 到 的 数据 本 加 到 数组 中 
self.puuidArray.append((object as AnyObject).value(forKey: "puuid") as! String) 
self.picArray.append((object as AnyObject).value(forKey: "pic") as! AVFile) 


print ("loaded + N(self.page)") 
self.collectionView?.reloadData() 
Jelse ( 
print (error?.localizedDescription) 


仔细 观察 上 面 方法 中 代码 ， 其 实 与 loadPosts() 方 法 非常 类 似 ， 只 不 过 该 方法 会 首先 判断 page 是 否 小 于 等 于 picArray 数 组 的 元 素 个 数 ， 如 果 为 true， 则 从 LeanCloud 云 端的 Posts 表 中 查询 page+12 条 记 
录 ， 并 且 将 该 记录 数 赋值 给 page， 便 于 下 一 次 滚动 视图 触 底 再 次 调用 loadMore() 方 法 。 


构建 并 运行 项 目 ， 为 了 便于 测试 请 将 当前 用 户 的 帖子 数量 增加 到 15 左 右 ， 然 后 在 HomeVC 页 面 中 向 上 移动 集合 视图 ， 在 调试 控制 台中 你 会 发 现 print0 函 数 所 打印 的 信息 ， 以 及 新 载 入 的 帖子 照片 ， 如 图 
22-2Bzn. 
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nw host stats, add src recv too small, received 24, 
expected 28 

2016-88-81 22:57:56.7967580 Instagram[9804:1014220] [] 
sa dst compare internal 128.132.53.161:44308 = 
123.59.42.233:443(08 

2016-88-01 22:57:56.797373 Instagram[9804:1014220] [] 
sa dst compare internal 128.132.53.161:44300 = 


loaded + 24 | 
-iil 37795.984618 Instagram[9884:1014220] [] 

sa ; dif compare. internal 120.132.49.239:443(8 = 

123.59.41.31:443(00 

2016-88-01 22:57:56.905176 Instagram[9884:1014221] [] 

sa dst compare internal 128.132.49.239:443(80 = 

123.59.41.31:443(00 

2016-88-01 22:57:56.905542 Instagram[9884:1014060] [] 

sa dst compare internal 128.132.49.239:443(8 = 
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的 效果 


22.2 ”为 GuestVC 实 现 分 页 载 入 功能 


除了 需要 在 HomeVC 控 制 器 中 实现 分 页 载 入 功能 ， 对 于 GuestVC 控 制 器 也 要 实现 同样 的 功能 。 有 了 前 面 的 代码 基础 ， 这 里 只 要 复制 粘贴 即 可 。 
步骤 1 在 GuestVC 类 中 ， 将 page 的 let (常量 ) 声明 修改 为 var (变量 ) 。 
步骤 2 将 HomeVC 类 中 的 scrollViewDidScroll( :) 方 法 和 loadMore() 方 法 全 部 复制 到 GuestVC 类 中 。 


步骤 3 在 loadMore() 方 法 中 ,将 


query?.whereKey("username", equalTo: AVUser.current ().username) 


query?.whereKey("username", equalTo: guestArray.last?.username) 


因为 在 GuestVC 中 我 们 需要 从 LeanCloud 云 端 获取 指定 访客 的 帖子 记录 。 


构建 并 运行 项 目 ， 使 用 另 一 个 账号 登录 ， 在 关注 中 找到 你 之 前 发 布 很 多 帖子 的 用 户 ， 人 在 GuestVC 界 面 中 查看 他 的 帖子 ， 效 果 依 然 完美 ! 


本 章 小 结 


本 章 的 主要 目的 是 实现 集合 视图 的 分 页 功能 ， 这 个 功能 的 实现 算法 是 我 们 第 一 次 接触 ， 但 是 理解 起 来 并 不 是 很 难 ， 概 括 出 来 其 实 就 是 : 只 要 是 page 的 数量 小 于 等 于 帖子 的 数量 ， 则 让 用 户 在 每 次 拉 搜 集 
合 视图 到 底部 的 时 候 ， 让 page 的 数量 加 12。 


第 23 章 ”搭建 帖子 控制 器 的 界面 


在 之 后 的 几 个 章节 中 ， 我 们 将 会 实现 当 用 户 在 个 人 主页 中 单 击 帖子 的 照片 后 ， 进 入 到 的 相应 的 帖子 控制 器 界面 。 


23.1 创建 帖子 控制 器 界面 


步骤 1 打开 故事 板 ， 从 对 象 库 中 拖 遇 1 个 Table View Controller (表格 视图 ) 到 编辑 区 域 。 


步骤 2 从 大 纲 视 图 中 选中 Table View， 然 后 在 Size Inspector 中 将 Table View 的 Row Height 设 置 为 450， 如 图 23-1 所 示 。 


> 图 sign InvC Scene Table View 
> 图 sign UPVC Scone ol r- SFE ZEN S 4o 
> 图 Reset PasswordVC Scene Prototype Cells - Section Height | mts IE ES 四 
» E Tab Bar Controller Scene "I 
Mos Scroll View 
> E HomeVvC Scene rl ere Sete [| oft | |. el2 
> 图 UploadVC Scene Top Bottom 
be E GuestVC Scene | — um 四 | TD [1s 
> [5] EditVC Scene o Vien 
v E Table View Controller Scene Show | Frame Rectangle ii 
v (C) Table View Controller ols d» 
v | |Table View. X Y 
v [53 Table View Cell 375|7 667 |% 
Content View Width Height 
(Bi First Responder Arrange | Position View 
E Exit 
> E FollowersVC Scene 
i uiam Table View 


> [BI Navigation Controller Scene Prototype Content 


> [Bl item Scene 
图 23-1 设置 表格 视图 的 单元 格 高 度 为 450 
Qi 如 果 你 在 故事 板 中 使 用 的 是 4.7 或 5.5 寸 的 屏幕 视图 ， 请 将 Row Height 设 置 为 550， 否 则 会 导致 底部 空间 不 足 。 


步骤 3 MEZER Amage View 到 表格 视图 的 单元 格 之 中 ， 在 Size Inspector 中 将 其 x 值 设置 为 10，y 值 设置 为 50， 将 它 拉 搜 成 一 个 正方 形 。 青 拖 忠 1 个 Image View， 到 这 个 正方 形 Image View 的 
上 面 ， 但 还 是 保证 在 单元 格 之 中 。 在 Size Inspector 中 将 其 x 值 设置 为 10，y 值 设置 为 10，width 和 height 均 设置 为 30， 如 图 23-2 所 示 。 


图 23-2 在 单元 格 中 添加 2 个 Image View 


步骤 4 ”从 对 象 库 抱 钨 1 个 Button 到 头像 lImage View 的 右 人 出 ， 在 Attributes Inspector 中 将 按钮 Alignment 设 置 为 左 对 齐 ， 字 号 设置 为 16，Title 设 置 为 username-Btn， 如 图 23-3 所 示 。 


步骤 5 ”从 对 象 库 拖 忠 1 个 Label 到 刚 创建 Button 的 右 侧 ， 在 Attributes Inspector 中 将 字号 修改 为 14，alignment 设 置 为 右 对 齐 ，Title 设 置 为 2h， 该 Label 用 于 显示 帖子 发 布 距离 当前 的 时 间 ， 如 图 23-4 
所 示 。 


DsernameBtn 
口 


图 23-3 ”在 单元 格 中 添加 1 个 Button 


usernameBtn 


图 23-4 在 单元 格 中 添加 1 个 Label 


步骤 6 ”在 显示 帖子 照片 的 Image View 的 下 面 ， 添 加 三 个 Button， 其 中 第 一 个 是 like 按 钮 ， 第 二 个 是 评论 按钮 ， 第 三 个 是 更 多 按钮 。 在 like 按 钮 的 右 侧 再 拖 抽 1 个 Label， 将 其 Title 设 置 为 0，alignment 
设置 为 居中 ， 该 按钮 用 于 显示 被 喜爱 的 数量 ， 如 图 23-5 所 示 。 


步骤 7 在 三 个 按钮 的 下 面 添加 一 个 Label， 拖 昌 Label 的 大 小 到 合适 的 位 置 ， 在 Attributes Inspector 中 将 Lines 设 置 为 0， 字 号 设置 为 15， 如 图 23-6 所 示 。 


图 23-5 ”在 单元 格 中 添加 3 个 Button 和 1 个 Label 


Button Q comment 
O 


图 23-6 ”在 单元 格 中 添加 1 个 Label 


步骤 8 ”在 帖子 照片 的 Image View 上 添加 一 个 Label， 在 Attributes Inspector 中 将 Title 设 置 为 puuid， 再 勾 选 其 Hidden 属 性 ， 让 它 不 可 见 ， 设 置 为 如 图 23-7 所 示 。 
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Interaction ( ) User Interaction Enabled 
(7) Multiple Touch 


图 Clears Graphics Context 
Button Q comment more [ ) Clip To Bounds 
Autoresize Subviews 


图 23-7 在 单元 格 的 Image View 上 面 添 加 1 个 Label 
步骤 9 在 项 目 导 航 中 创建 一 个 新 的 Cocoa Touch Class 文 件 ，Subclass Of 为 UITable-ViewController，Class 设 置 为 PostVC。 
步骤 10 ”再 次 创建 一 个 新 的 Cocoa Touch Class 文 件 ，Subclass Of 为 UITableViewCell，Class 设 置 为 PostCell。 


步骤 11 在 故事 板 中 选中 新 创建 的 表格 视图 控制 器 ， 在 ldentity Inspector 中 将 Class 设 置 为 PostVC，Storyboard ID 也 设置 为 PostVC， 如 图 23-8 所 示 。 


cass [rove oD 
Prototype Cells Module à 


?* usernameBtn | js : 
sonorae O —] 
Restoration ID| | 


C Use Storyboard ID 


图 23-8 在 故事 板 中 为 View Controllet 设 置 Class 和 Storyboard ID 


将 Class 设 置 为 PostVC 是 将 故事 板 中 所 搭建 的 表格 视图 控制 器 与 项 目的 PostVC 类 建立 关联 。 而 设置 Storyboard ID 则 用 于 在 程序 运行 中 动态 载 入 故事 板 里 特定 的 控制 器 ，Storyboard 1D 就 是 这 个 控制 器 
的 唯一 标识 。 
步骤 12 ”从 大 纲 视 图 选择 表格 控制 器 中 的 Table View Cell， 在 ldentity Inspector 中 将 Class 设 置 为 PostCell， 在 Attributes Inspector 中 将 ldentifier 设 置 为 Cell。 


全 注意 。 不管 是 集合 视图 中 的 单元 格 还 是 表格 视图 中 的 单元 格 ， 我 们 一 般 不 会 为 其 设置 Storyboard ID， 因 为 我 们 使 用 它 都 会 利用 相关 的 协议 方法 ， 从 对 应 的 表格 或 集合 视图 的 可 复 用 队列 中 直接 获取 。 
为 了 可 以 确定 单元 格 的 类 型 ， 我 们 一 般 需要 在 故事 板 中 指定 单元 格 的 Identifier。 


23.2 ”创建 单元 格 的 Outlet 关 联 


步骤 1 在 PostCell 类 中 为 单元 格 的 头像 Image View、usernameBtn 和 其 右 侧 的 Label 创 建 Outlet 关 联 ，Name 分 别 设置 为 : avalmg、usernameBtn 和 dateLbl。 


class PostCell: UITableViewCell { 
// header objects 
GIBOutlet weak var avalmg: UllImageView! 
QIBOutlet weak var usernameBtn: UlButton! 
QGIBOutlet weak var dateLbl: UILabel! 


步骤 2 为 帖子 照片 的 Image View，like、comment 和 more 按 钮 ， 以 及 like 数 量 的 Label、 帖 子 描述 的 Label 和 puuid 的 Label 创 建 Outlet 关 联 ，Name 分 别 设置 为 : piclmg, likeBtn, commentBtn, 
moreBtn、likeLbl、titleLbl 和 puuidLbl。 


/ EFRA 


Outlet weak var picImg: UIImageView! 
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weak var likeBtn: UIButton! 
weak var commentBtn: UlButton! 
weak var moreBtn: UIButton! 


weak var likelbl: UIlLabel! 
weak var titlelLlbl: UIlLabel! 
weak var puuidLbl: UILabel! 
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23.3 ”整理 PostVC 类 的 代码 


为 PostCell 类 创建 好 必要 的 Outlet 关 联 代码 以 后 ， 接 下 来 需要 为 PostVC 添 加 一 些 必 要 代码 。 


步骤 1 在 PostVC.swift 文 件 中 创建 字符 串 类 型 的 全 局 变量 数组 postuuid。 


import UIKit 
var postuuid = [String] () 
class PostVC: UlTableViewController { 


步骤 2 在 PostVC 类 中 添加 下 面 几 个 属性 : 


class PostVC: UITableViewController { 
// 从 服务 器 获取 数据 后 写 入 到 相应 的 数组 中 
var avaArray = [AVFile] () 
var usernameArray = [String] () 
var dateArray = [Date] () 
var picArray = [AVFile]|() 
var puuidArray [String] () 
var titleArray [String] () 


步骤 3 在 viewDidLoad() 方 法 中 定义 新 的 返回 按钮 。 


override func viewDidLoad() { 


/ / 定义 新 的 返回 按钮 
self.navigationItem.hidesBackButton = true 

let backBtn = UIBarButtonlItem(title: "返回 ", style: .plain, target: self, action: fselector(back( :))) 
self.navigationlItem.leftBarButtonItem = backBtn 


} 


在 默认 的 情况 下 ，PostVC 叶 航 栏 中 的 返回 按钮 的 Title 被 自动 设置 为 用 户 名 ， 这 个 用 户 名 来 自 于 其 父 视图 控制 器 中 导航 栏 的 Title 属 性 。 考 虑 到 美观 程度 ， 所 以 在 PostVC 的 viewDidLoad() 方 法 中 ， 重 新 定 
导航 栏 的 返回 按钮 ， 并 将 其 Title 设 置 为 返 


步骤 4 在 PostVC 类 中 添加 back(_:) 方 法 。 


func back( sender: UIBarButtonIterm) { 


步骤 5 在 viewDidLoad() 方 法 的 最 后 ， 添 加 下 面 的 代码 ， 为 PostVC 控 制 器 提供 向 右 划 动 返回 之 前 控制 器 的 功能 。 


// 向 右 划 动 屏幕 返回 到 之 前 的 控制 器 

let backSwipe = UISwipeGestureRecognizer (target: self, action: #selector 
(back( :))) 
backSwipe.direction = .right 
self.view.isUserInteractionEnabled = true 
self.view.addGestureRecognizer (backSwipe) 


UlSwipeGestureRecognizer 类 的 direction 属 性 用 于 定义 划 动 方法 ， 它 是 UISwipeGestureRecognizerDirection 类 型 的 结构 体 ， 其 中 包括 up、down、left 和 right 四 个 常量 。 


步骤 6 在 viewDidLoad() 方 法 的 最 后 ， 添 加 下 面 的 代码 : 


// 动态 单元 格 高 度 设置 

tableView.rowHeight = UITableViewAutomaticDimension 
tableView.estimatedRowHeight = 450 
let postQuery = AVQuery (className: "Posts") 

postQuery?.whereKey ("puuid", equalTo: postuuid.last!) 
postQuery?.findObjectsInBackground(( (objects:[Any]?, error:Error?) in 


)) 


DOES 


上 面 的 代码 会 动态 配置 呈现 帖子 的 单元 格 高 度 。 首 先 ， 我 们 设置 了 表格 视图 的 rowHeight 属 性 ， 这 个 属性 可 以 直接 赋值 ， 比 如 88， 这 样 就 指定 了 一 个 所 有 单元 格 高 度 都 是 88 的 表格 视图 。 对 于 有 定 高 需 
求 的 表格 ， 建 议 使 用 rowHeight 方 式 保证 不 必要 的 高 度 计算 和 调用 。 另 外 ，rowHeight 属 性 的 默认 值 从 iOs 8 开始 就 是 UITableViewAutomaticDimension 了 ， 这 样 就 告诉 了 表格 视图 ， 你 要 基于 其 他 信息 来 
算出 单元 格 的 尺寸 大 小 。 


另 一 种 指定 单元 格 行 高 的 方式 就 是 实现 UlTableViewDelegate 协 议 的 tableView(_:heightForRowAt:) 方 法 ， 该 方法 可 以 让 我 们 指定 每 个 单元 格 的 行 高 。 需 要 注意 的 是 ， 实 现 了 这 个 方法 后 ，rowHeight 
的 设置 将 无 效 。 所 以 ， 这 个 方法 适用 于 具有 多 种 单元 格 高 度 的 表格 视图 。 


第 二 行 代码 设置 了 单元 格 的 预 估 行 高 ， 就 是 现 有 的 原型 单元 格 的 高 度 。 
之 后 的 查询 语句 对 象 用 于 从 LeanCloud 云 端的 Posts 表 中 查询 puuid 为 指定 id 的 帖子 记录 。 


步骤 7 在 findObjectsInBackground0 方 法 的 闭 包 中 添加 下 面 的 代码 : 


postQuery?.findObjectsInBackground(( (objects:[Any]?, error:Error?) in 
// 清空 数组 
self.avaArray.removeAll(keepingCapacity: false) 
self.usernameArray.removeAll(keepingCapacity: false) 
self.dateArray.removeAll(keepingCapacity: false) 


self.picArray. removeAll (keepingCapacity: false) 
self.puuidArray.removeAll(keepingCapacity: false) 


se] .titleArray. removeAll(keepingCapacity: false) 
for object in objects! { 


self.avaArray.append((object as AnyObject).value(forKey: "ava") as! AVFile) 
self.usernameArray.append((object as AnyObject).value(forKey: "username") as! String) 
self.dateArray.append((object as AnyObject).createdAt) 

self.picArray.append((object as AnyObject).value(forKey: "pic") as! AVFile) 
self.puuidArray.append((object as AnyObject).value(forKey: "puuid") as! String) 
self.titleArray.append((object as AnyObject).value(forKey: "title") as! String) 


.ctableView.reloadData () 


在 viewDidLoad() 方 法 中 ， 我 们 需要 载 入 指定 帖子 的 相关 数据 ， 所 以 先 要 清除 6 个 数组 中 的 数据 ， 然 后 从 LeanCloud 云 端的 Posts 表 中 将 获取 到 的 记录 添加 到 数组 之 中 。 


闭 包 中 的 第 一 个 参数 objects 是 从 云端 的 Posts 表 中 获取 到 的 帖子 记录 信息 ， 通 过 for 循 环 运 代 出 所 有 AVObject 类 型 的 对 象 。 在 循环 中 通过 value(forKey:) 方 法 获取 到 记录 的 指定 字段 的 内 容 ， 并 通过 as! 将 
其 转换 为 特定 类 型 。 


在 闭 包 中 的 最 后 还 要 通过 reloadData() 方 法 更 新 表格 视图 ， 否 则 在 进入 PostVC 控 制 器 后 根本 看 不 到 帖子 的 相关 内 容 。 这 是 因为 闭 包 中 的 代码 是 在 其 他 线程 中 运行 的 ， 主 线程 程序 根本 不 会 等 待 这 个 后 台 
线程 执行 结束 才 去 呈现 表格 视图 的 相关 信息 ， 因 此 在 最 初 呈现 表格 的 时 候 6 个 数组 中 均 没 有 元 素 值 ， 也 就 意味 着 不 会 显示 任何 的 信息 。 所 以 要 在 后 台 线 程 准备 好 6 个 数组 以 后 执行 表格 视图 的 reloadData() 方 
ik. 


步骤 8 如 果 PostVC 类 中 有 numberOfsections(in:) 广 法 的 话 ， 将 其 删除 。 因 为 它 是 UITableViewDataSsource 协 议 的 可 选 方法 ， 所 以 不 是 必须 实现 的 。 如 果 没 有 实现 该 方法 ， 当 前 的 表格 视图 默认 只 有 1 
个 section。 修 改 tableView( :numberOfRowslnSection:) 方 法 ， 让 其 返回 值 为 usernameArray.count。 


23.4 ”生成 表格 视图 的 单元 格 


在 确定 好 了 表格 视图 的 Section 和 Cell 个 数 以 后 ， 就 可 以 利用 tableView( :cellForRowAt:) 协 议 方法 生成 单元 格 对 象 了 。 
步骤 1 在 PostVC 类 中 添加 tableView( :cellForRowAt:) 协 议 方法 。 


步骤 2 在 tableView( :cellForRowAt:) 协 议 方法 中 添加 下 面 的 代码 : 


override func tableView( tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { 
// 从 表格 视图 的 可 复 用 队列 中 获取 单元 格 对 象 
let cell - Ca Mu i d "Cell", for: indexPath) as! PostCell 
// 通过 数组 信息 关联 单元 格 中 的 UI 控 件 


cell SG na setTitle(usernameArray[indexPath.row], for: .normal) 
is .puuidLbl.text = puuidArray| indexPath.row] 
ll.titleLbl.text titleArray[indexPath.row] 


/ 配置 用 户头 像 
avaArray[indexPath.row].getDataInBackground { (data:Data?, error:Error?) in 
cell.avalmg.image = UIImage (data: data!) 


} 

// 配置 帖子 照片 

picArray[indexPath.row].getDataInBackground ( (data:Data?, error:Error?) in 
cell.piclImg.image = UIImage (data: data!) 


} 


return cell 


首先 ， 我 们 通过 dequeueReusableCell(withldentifierfor:) 方 法 从 表格 视图 的 可 复 用 队列 中 获取 单元 格 对 象 ， 然 后 设置 该 单元 格 的 usernameBtn 的 title、puuidLbl 和 titleLbl。 因 为 avaArray 和 PicArray 
数组 中 的 元 素 都 是 AVFile 类 型 ， 所 以 可 以 直接 对 指定 索引 值 的 元 素 执行 getDatalnBackground() 方 法 ， 进 而 从 云端 下 载 用 户 的 头像 和 帖子 照片 的 数据 ， 并 且 在 方法 的 闭 包 中 完成 对 单元 格 相 应 Image View 
控件 的 赋值 。 


接 下 来 ， 我 们 需要 计算 帖子 的 创建 时 间 与 当前 时 间 的 间隔 差 。 


步骤 3 return cell 语 句 的 上 面 继续 添加 代码 : 


// 帖子 的 发 布 时 间 和 当前 时 间 的 间隔 差 

/ : 获取 帖子 的 创建 时 间 

from = dateArray[indexPath.row] 

/7 获取 当前 的 时 间 

let now = Date() 

// E 建 Calengqar .Component 类 型 的 Set 集 合 

let components : Set«Calendar.Component» = [.second, .minute, .hour, .day, .weekOfMonth] 


let difference - Calendar.current.dateComponents (components, from: from, to: now) 


在 上 面 的 代码 中 ， 首 先 通 过 dateArray 数 组 获取 到 帖子 的 创建 时 间 一 一 Date 类 型 ， 然 后 再 获取 到 当前 的 时 间 。 
接 下 来 的 两 行 代 码 是 关键 ， 第 一 行 创建 了 Calendar.Component 类 型 的 Set 集 合 。 


Calendar 类 是 与 日 历 相关 的 类 ， 它 封装 了 一 些 与 计算 时 间 相 关 的 信息 。 比 如 时 间 的 开始 、 时 间 的 长 度 或 者 是 分 割 时 间 等 等 。 在 当前 所 创建 的 .omponents 中 ， 我 们 需要 得 到 计算 后 的 秒 、 分 、 时 、 天 、 
周 的 相关 信息 。 


二 行 代码 是 计算 从 from 到 to 时 间 经 过 了 多 长 时 间 ， 具 体 的 间隔 时 间 单 位 将 由 components 集 合 提供 (只 有 时 分 秒 天 周 ) 。 代 码 中 定义 的 difference 将 会 是 NSDateComponents 类 型 的 对 象 ， 在 控制 
台 打 印 该 对 象 的 话 形 如 下 面 这 样 ， 这 意味 着 from 与 to 之 间 相 差 2 天 9 小 时 16 分 钟 43 秒 。 


Day: 2 

Hour: 9 

Minute: 16 
Second: 43 

Week of Month: 0 


步骤 4 在 let difference 语 句 的 下 面 继续 添加 代码 : 


if difference.second! <= 0 { 
cell.datelbl.text = "MÆ" 

if difference.second! > 0 && difference.minute! <= 0 { 
cell.dateLbl.text = "WV(difference.second!)4/." 


if difference.minute! > 0 && difference.hour! <= 0 { 
cell.dateLbl.text = "\ (difference.minute!) 分 ." 


H 
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Fference.hour! > 0 && difference.day! <= 0 ( 


cell.dateLbl.text = "\ (difference.hour!) 时 ." 

if difference.day! > 0 && difference.weekOfMonth! <= 0 { 
cell.datelbl.text = "N(difference.day!) X." 

if difference.weekOfMonth! > 0 { 
cell.datelbl.text = "N(difference.weekOfMonth!)J4j." 


通过 6 个 if 语 句 判断 间隔 时 间 的 显示 内 容 ， 注 意 这 6 个 if 语 句 的 判断 顺序 不 能 颠倒 ,一定 要 从 最 小 的 间隔 单位 向 最 大 的 单位 判断 。 因 为 如 果 满 足 更 大 单位 条 件 的 话 ， 输 出 到 Label 的 内 容 会 发 生 改变 。 


23.5” 从 HomeVC 切 换 到 PostVC 时 的 代码 实现 


当 用 户 在 个 人 主页 界面 中 单 击 集合 视图 中 的 某 个 帖子 照片 时 ， 会 通过 导航 控制 器 推出 PostVC 控 制 器 ， 从 而 呈现 帖子 的 详细 信息 。 接 下 来 ， 我 们 就 实现 这 个 功能 。 


步骤 1 在 PostVC 类 中 实现 back( :) 方 法 。 


func back( sender: UIBarButtonItem) { 
// 退回 到 之 前 
| = self.navigationController?. popViewController (animated: true) 
// 从 postuuid 数 组 中 移 除 当前 帖子 的 uuid 
if !postuuid.isEmpty 1 
postuuid.removeLast () 
} 
} 


因为 是 实现 返回 功能 ， 所 以 在 该 方法 中 通过 导航 控制 器 的 popViewController(animated;) 方 法 ， 从 导航 控制 器 中 返回 之 前 的 控制 器 。 因 为 该 方法 有 返回 值 ， 而 这 个 返回 值 我 们 又 不 需要 ， 所 以 使 用 _= 将 
其 忽略 ,如果 不 写 的 话 也 可 以 ,但 是 在 Xcode 8 中 会 有 和 警告 信息 。 


另外 ， 如 果 postuuid 数 组 中 有 值 的 话 ， 移 除 最 新 的 那个 。 


步骤 2 在 HomeVC 类 中 添加 collectionView(_:didSelectltemAt:) 协 议 方法 ， 当 用 户 在 集合 视图 中 单 击 某 个 单元 格 的 时 候 会 调用 该 方法 。 


// go post 
override func collectionView(  collectionView: UlCollectionView, didSelectItemAt indexPath: IndexPath) { 
// 发 送 post uuid 到 postuuid 数 组 中 
postuuid.append (puuidArray[indexPath.row]) 
// 导航 到 PostVC 控 制 器 
let postVC = self.storyboard?.instantiateViewController (withIdentifier: "PostVC") as! PostVC 
self.navigationController?.pushViewController (postVC, animated: true) 


在 该 方法 中 ， 程 序 通过 indexPath.row 了 解 到 用 户 单 击 了 集合 视图 中 的 哪个 单元 格 ， 然 后 将 对 应 帖子 的 uuid 添 加 到 全 局 数组 变量 postuuid 之 中 ， 当 切换 到 PostVC 控 制 器 以 后 ， 我 们 自然 而 然 的 就 可 以 通 
过 postuuid 的 last 方 法 获取 到 最 新 帖子 的 puuid 了 。 


构建 并 运行 项 目 ， 当 在 集合 视图 中 单 击 某 个 帖子 照片 以 后 ， 会 进入 到 PostVC 控 制 器 之 中 ， 但 此 时 的 表格 布局 并 不 理想 ， 如 图 23-9 所 示 。 


图 23-9 ”进入 到 PostVC 控 制 器 后 的 显示 效果 


这 是 因为 PostVC 类 的 viewDidLoad() 方 法 中 的 下 面 两 行 代码 在 作怪 ， 我 们 暂时 现 将 其 注释 掉 ， 后 面 需要 的 时 候 表 将 其 打开 。 


/* 
// 动态 单元 格 高 度 设置 
tableView.rowHeight = UITableViewAutomaticDimension 
tableView.estimatedRowHeight = 450 

xy 


重新 构建 并 运行 项 目 ， 效 果 如 图 23-10 所 示 。 


= liuming 


图 23-10 ”注释 以 后 的 显示 效果 


在 故事 板 中 选中 PostVC 控 制 器 的 表格 视图 ， 在 Attributes Inspector 中 将 Separator 设 置 为 None， 取 消 单元 格 之 间 的 分 割 线 ， 如 图 23-11 所 示 。 
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E 23-11 将 表格 视图 的 Separator 设 置 为 None 
在 大 纲 视 图 中 选中 表格 视图 中 的 单元 格 (Cell) ， 在 Attributes Inspector 中 将 Selection 设 置 为 None。 


在 PostVC 类 的 tableView( :cellForRow-At:) 方 法 中 ， 在 cell.titleLbl.text 语 句 的 下 面 添加 两 行 代码 : 


cell.titleLbl.text = titleArray[indexPath.row] 
// 让 Label 和 Button 根 据 文字 内 容 去 调整 自身 的 大 小 
cell.titleLbl.sizeToFit () 
cell.usernameBtn.sizeToFit () 


通过 sizeToFit() 方 法 可 以 让 Label 和 Button 根 据 自身 文字 内 容 动 态 调 整 自 身 的 大 小 。 


构建 并 运行 项 目 ， 单 元 格 底部 的 Labe| 完 美 贴 合 到 三 个 按钮 的 下 方 ， 如 图 23-12 所 示 。 
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Button Q comment more 


图 23-12 ”PostVC 控 制 器 中 的 单元 格 最 终 显 示 效 果 


本 章 小 结 


本 章 实 现 了 帖子 控制 器 的 主要 功能 ， 包 括 搭建 用 户 界面 、 实 现 控制 器 的 功能 代码 、 从 服务 器 端 读 取 相应 的 信息 等 。 这 些 功 能 我 们 在 之 前 的 章节 中 或 多 或 少 有 所 涉及 ， 这 里 更 多 是 让 大 家 对 创建 控制 器 有 
更 深入 的 体验 。 


第 24 章 ”设置 帖子 单元 格 的 布局 


在 本 章 中 ， 我 们 要 对 PostVC 控 制 器 的 单元 格 进行 布局 ， 使 其 可 以 在 各 种 尺寸 的 屏幕 上 完美 显示 。 


24. ”设置 单元 格 垂直 方向 的 布局 


与 之 前 利用 UI 控件 的 frame 或 origin 属 性 不 同 ， 这 一 章 我 们 将 利用 iOS SDK 的 自动 布局 特性 来 进行 界面 布局 。 通 过 内 定 的 Constraint (约束 ) 和 各 项 条 件 来 计算 出 合理 的 布局 。 而 这 个 合理 的 布局 ， 正 好 
符合 我 们 的 预期 和 意图 。 所 谓 约 束 ， 简 单 来 说 就 是 说 明 两 个 控件 之 间或 单独 控件 与 自己 之 间 的 关系 ， 比 如 Button 的 底部 与 Label 的 顶部 在 垂直 方向 上 有 10 个 点 的 距离 ，Image View 的 Lead ( 左 侧 ) 与 控制 
器 视图 的 Lead ( 左 侧 ) 有 5 个 点 的 距离 等 。 


步骤 1 在 项 目 导航 中 打开 PostCell.swift 文 件 ， 在 awakeFromNib() 方 法 中 添加 下 面 的 代码 : 


override func awakeFromNib() { 
super.awakeFromNib() 
let width = UIScreen.main.bounds.width 
// 启用 约束 
avalmg.translatesAutoresizingMaskIntoConstraints = false 
usernameBtn.translatesAutoresizingMaskIntoConstraints = false 
dateLbl.translatesAutoresizingMaskIntoConstraints - false 
picimg.translatesAutoresizingMaskIntoConstraints = false 
likeBtn.translatesAutoresizingMaskIntoConstraints = false 
commentBtn.translatesAutoresizingMaskIntoConstraints = false 
moreBtn.translatesAutoresizingMaskIntoConstraints - false 


likeLbl. translatesAutoresizingMaskl [IntoConstraints = false 
titleLbl.translatesAutoresizingMaskIntoConstraints = false 
puuidLbl.translatesAutoresizingMaskIntoConstraints = false 


} 


在 该 方法 中 ， 我 们 首先 获取 到 屏幕 的 宽度 值 ， 因 为 在 后 面 设置 约束 的 时 候 会 经 常用 到 。 


其 次 是 设置 所 有 UI 控 件 的 translatesAutoresizingMasklntoConstraints 属 性 为 false。 i ENS MEM M ME 必须 将 视图 或 者 控件 的 
translatesAutoresizingMasklntoConstraints 属 性 设置 为 false， 这 样 才能 通过 代码 方式 添加 约束 (Constraint) ， 否 则 视图 还 是 会 按照 以 往 的 autoresizingMask 进 行 计算 。 


步骤 2 ”继续 在 awakeFromNib0 方 法 中 添加 下 面 的 代码 : 


let picWidth = width - 20 

// 约束 

self.contentView.addConstraints (NSLayoutConstraint.constraints( 
withVisualFormat: "V:|-10-[ava (30)]-10- [pic (V (pácWidth))]-5- [like (30)]" 


options: [], 
metrics: nil, 
views: ["ava": avalmg, "pic": picimg, "like": likeBtn])) 


首先 定义 帖子 照片 的 宽度 为 屏幕 宽度 减 去 20， 也 就 意味 着 它 在 水 平方 向 与 屏幕 两 边 各 有 10 个 点 的 距离 。 
self.contentView 是 单元 格 对 象 默 认 的 显示 视图 ， 因 为 之 前 的 所 有 UI 控件 都 被 添加 到 了 这 里 ， 所 以 需要 在 这 个 层面 上 为 控件 之 间 添 加 约束 。 


addConstraints( :) 方 法 可 以 添加 多 个 约束 ， 这 些 约束 我 们 通过 NSLayoutConstraint 类 的 constraints(withVisualFormat:options:metrics:views:) 方 法 生成 。 其 实 ， 生 成 约束 的 方法 有 很 多 ， 比 如 在 故 
事 板 中 通过 可 视 化 的 方式 ， 在 程序 代码 中 通过 函数 方法 的 方式 ， 这 里 我 们 使 用 可 视 化 语言 的 方式 ， 因 为 这 种 方式 的 语言 非常 容易 理解 。 


withVisualFormat 人 参数 就 是 创建 约束 的 可 视 化 语言 ， 它 是 一 个 字符 串 ， 通 过 字面 意思 我 们 可 以 清楚 的 知道 : 在 self.contentView 视 图 中 的 垂直 方向 上 (V) ， 从 顶部 (|) 距离 10 个 点 (-10-) 有 一 个 高 
度 为 30 的 avalmg (-[ava(30)]-) ， 再 距离 10 个 点 (-10-) 有 一 个 AMNEM (-[pic((picWidth)]-) ， 再 距离 5 个 点 (-5-) 有 一 个 高 度 为 30 的 like 按 钮 ([like(30)]. 


该 方法 是 如 何 知 道 VisualFormat 中 ava、pic 和 |like 代 表 什么 呢 ? 就 靠 最 后 的 views 参 数 ， 它 是 一 个 字典 类 型 的 对 象 ， 对 应 着 VisualFormat 中 的 控件 名 称 和 真正 的 实体 控件 对 象 。 


步骤 3 ”继续 添加 约束 。 


// 重 直 方向 距离 顶部 10 个 点 是 usernameBtn 
self.contentView.addConstraints (NSLayoutConstraint.constraints( 
withVisualFormat: "V: |-10-[username]", options: [], metrics: nil, views: ["username": usernameBtn])) 
// 重 直 方向 距离 picImg 底 部 5 个 点 是 commentBtny, commentBtn;i A A30 
self.contentView.addConstraints (NSLayoutConstraint .constraints ( 

withVisualFormat: "V:[pic]-5-[comment(30)]", options: [], metrics: nil, views: ["pic": picImg, "comment": commentBtn])) 


需要 注意 的 是 ， 第 二 行 的 VisualFormat 中 V: 后 面 没 有 跟 |， 代 表 这 个 约束 不 是 从 顶部 开始 的 ， 而 是 只 针对 piclmg 的 底部 开始 。 


步骤 4 继续 添加 约束 。 


// 重 直 方向 距离 顶部 10 个 点 是 gateLb1 

self.contentView.addConstraints (NSLayoutConstraint.constraints( 

withVisualFormat: "V:|-15-[date]", options: [], metrics: nil, views: ["date": dateLbl])) 

// &É«U$ESlikeBEnTZ5&XtitleLbl, © T 845,5 X X LE 4 JR Spa ko 

self.contentView.addConstraints (NSLayoutConstraint.constraints( 

withVisualFormat: "V:[like]-5-[title]-5-|", options: [], metrics: nil, views: ["like": likeBtn, "title": titleLbl])) 


步骤 5 ”继续 添加 垂直 约束 代码 : 


// 垂直 方向 距离 picImg 底 部 5 个 点 是 moreBtn，moreBtn 高 度 为 30 
self.contentView.addConstraints (NSLayoutConstraint.constraints( 
withVisualFormat: "V:[pic]-5-[more(30)]", options: [], metrics: nil, views: ["pic": piclImg, "more": moreBtn])) 
// 垂直 方向 距离 picImg 底 部 10 个 点 是 1ikeLibl， 高 度 值 默 认 
self.contentView.addConstraints (NSLayoutConstraint.constraints( 

withVisualFormat: "V:[pic]-10-[likes]", options: [], metrics: nil, views: ["pic": picImg, "likes": likeLb1])) 


在 垂直 方向 的 约束 添加 完成 以 后 ， 就 该 考虑 水 平方 向 的 约束 了 。 


24.20 ”设置 单元 格 水 平方 向 的 布局 


步骤 1 在 之 前 代码 的 下 面 继续 添加 代码 : 


self.contentView.addConstraints (NSLayoutConstraint.constraints( 
withVisualFormat: "H:|-10-[ava(30)]-10-[username]", options: [], metrics: nil, views: ["ava": avalmg, "username": usernameBtn])) 


这 回 是 在 水 平方 向 上 ， 距 离 视图 左 侧 10 个 点 是 avalmg， 宽 度 30。 距 离 avalmg 右 侧 10 个 点 是 usernameBtn。 


步骤 2 继续 添加 水 平 约束 代码 : 


// picImg 的 宽度 为 屏幕 的 宽度 
self.contentView.addConstraints (NSLayoutConstraint.constraints( 
withVisualFormat: "H:|-0-[pic]-0-|", options: [], metrics: nil, views: ["pic": D mg])) 
// 距离 视图 左 侧 15 点 是 宽度 30 的 1ikeBtn， 距 离 l1ikeBtn 104,4 X€likeLbl, JEZjlikeLbl 20 个 点 是 宽度 30 的 commentBtn 
self.contentView.addConstraints (NSLayoutConstraint.constraints( 
withVisualFormat: "H:|-15-[like(30)]-10-[likes]-20-[comment (30)]", options: [], metrics: nil, views: ["like": likeBtn, "likes": likeLbl, "comment": commentBtn])) 


步骤 3 ”继续 添加 水 平 约 束 代码 : 


// 水 平 距离 视图 右边 缘 15 个 点 是 宽度 30 的 moreBtn 
self.contentView.addCons cup rur 
withVisualFormat: "H:[more(30)]-15-|", options: [], metrics: nil, views: ["more": moreBtn])) 


// 术 平 方向 距离 两 端 15 点 是 titleLibl 的 两 端 
self.contentView.addConstraints (NSLayoutConstraint.constraints( 
withVisualFormat: "H:|-15-[title]-15-|", options: [], metrics: nil, views: ["title": titleLbl])) 
// 水 平 距离 视图 右边 缘 15 个 点 是 qateLb1 
self.contentView.addConstraints (NSLayoutConstraint .constraints ( 

withVisualFormat: "H:|[date]-10-|", options: [], metrics: nil, views: ["date": datelbl])) 


下 午 11:55 | 


EXO 评论 更 多 


这 是 我 的 第 一 个 帖子 ! 好 激动 


Item Item 


图 24-1 单元 格 布局 设置 好 后 的 效果 


运营 商 F 上 午 12:05 mm: 


5 在 威海 
6 在 威海 
7 在 威海 
8 在 威海 
9 在 威海 
10 在 威海 
11 在 威海 
12 在 威海 


Item Item 
E24-2 ”发布 长 备注 后 的 效果 
步骤 4 在 PostVC 类 中 将 之 前 在 viewDidLoad() 方 法 中 注释 掉 的 两 行 代 码 重 新 启用 。 


// 动态 单元 格 高 度 设置 
tableView.rowHeight = UITableViewAutomaticDimension 
tableView.estimatedRowHeight = 450 


重新 启用 以 后 在 自动 布局 的 作用 下 ， 表 格 视图 中 的 单元 格 高 度 会 根据 内 容 动态 调整 了 。 
构建 并 运行 项 目 ， 运 行 效果 如 图 24-1 所 示 。 


你 还 可 以 发 布 一 个 评论 很 长 并 且 有 很 多 换行 的 帖子 ， 运 行 后 的 效果 如 图 24-2 所 示 。 


本 章 小 结 


本 章 我 们 利用 自动 布局 (AutoLayout) 特性 ， 为 单元 格 中 的 UI 控件 添加 约束 ,约束 可 以 是 控件 与 控件 之 间 的 ， 也 可 以 是 控件 自身 的 。 设 置 约束 的 方式 可 以 有 多 种 方式 : 故事 板 可 视 化 方式 、 代 码 函 数 方 
式 和 可 视 化 语言 方式 。 这 里 我 们 使 用 的 是 第 三 种 方式 ， 它 的 优势 在 于 可 以 在 一 行 代码 中 创建 多 个 约束 ， 简 单 明了 、 通 俗 易 懂 ! 


第 25 草 ”进一步 美化 程序 界面 


虽然 现在 的 PostVC 控 制 器 的 用 户 界面 看 起 来 已 经 是 有 模 有 样 的 了 ， 但 离 我 们 的 最 终 目标 还 是 有 一 定 差距 的 。 在 本 章 中 ， 我 们 要 进一步 美化 PostVC 界 面 。 


25.1 为 按钮 定制 Icon 图 


现在 PostVC 中 的 三 个 按钮 均 为 文本 类 型 的 按钮 ， 我 们 需要 将 其 变 成 lcon 类 型 的 按钮 。 
步骤 1 从 资源 文件 夹 中 将 like.png、unlike.png、comment.png 和 more.png 四 个 文件 拖 蝶 到 Instagram 项 目 之 中 ， 勾 选 Copy items if needed 和 Instagram 目 标 。 


步骤 2 在 故事 板 的 PostVC 视 图 中 选中 likeBtn， 在 Attributes Inspector 中 删除 Title 的 内 容 ， 再 将 Image 设 置 为 unlike.png。 此 时 的 likeBtn 按 钮 会 变 得 非常 大 ， 因 为 它 默认 会 展开 到 原 图 的 大 小 。 在 
Size Inspector 中 将 按钮 的 大 小 修改 为 30x30， 位 置 调 整 到 之 前 的 位 置 即 可 ， 如 图 25-1 所 示 。 


图 25-1 设置 Like 按 钮 的 背景 图 
Qum 在 故事 板 中 对 likeBtn 所 做 的 任何 调整 都 不 会 影响 到 视图 最 终 的 布局 ， 因 为 我 们 是 通过 自动 布局 在 程序 中 借助 约束 进行 的 布局 ， 这 里 的 调整 只 是 让 我 们 可 以 看 得 更 舒服 些 。 


步骤 3 ”仿照 步骤 2， 继 续 对 commentBtn 和 moreBtn 进 行 Image 设 置 ， 效 果 如 图 25-2 所 示 。 


图 25-2 ”设置 评论 和 Mote 按 钮 的 背 录 图 


步骤 4 在 PostCell 类 的 awakeFromNib() 方 法 的 最 后 ， 添 加 下 面 的 两 行 代码 ， 让 用 户头 像 成 圆 形 显 示 。 


avalmg.layer.cornerRadius = avalmg.frame.width / 2 
avalmg.clipsToBounds - true 


构建 并 运行 项 目 ， 效 果 如 图 25-3 所 示 。 
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图 25-3 ”头像 设置 为 圆 形 


除了 在 个 人 主页 中 实现 单 击 帖子 照片 切换 到 PostVC 界 面 以 外 ， 我 们 还 需要 在 访客 页 面 中 实现 同样 的 功能 。 


在 HomeVC 类 中 拷贝 collectionView( :didselectltemAt:) 方 法 及 代码 ， 然 后 将 其 粘贴 到 GuestVC 类 中 。 


构建 并 运行 项 目 ， 进 入 到 访客 页 面 ， 然 后 单 击 其 中 一 个 帖子 照片 ，PostVC 界 面 完美 呈现 到 屏幕 上 。 


在 接 下 来 的 部 分 中 ， 我 们 要 对 导航 和 标签 栏 控制 器 进行 美化 。 


在 项 目 导航 中 新 建 一 个 新 的 Cocoa Touch Class 文 件 ，Subclass of 为 UINavigation-Controller，Class 设 置 为 NavVC。 再 新 建 一 个 Cocoa Touch Class 文 件 ，Subclass of 为 UITab- 
BarController，Class 设 置 为 TabBarVC。 


步骤 2 在 故事 板 中 选中 唯一 的 一 个 TabBarController， 在 ldentity Inspector 中 将 其 Class 设 置 为 TabBarVC。 再 将 故事 板 中 所 有 的 导航 控制 器 的 Class 设 置 为 NavVC (一 共 3 个 ) 。 


N 


步骤 3 ”在 NavVC 类 的 viewDidLoad() 方 法 中 添加 下 面 的 代码 : 


override func viewDidLoad() { 
super.viewDidLoad() 
// 导航 栏 中 Title 的 颜色 设置 
self.navigationBar.titleTextAttributes = [NSForegroundColorAttributeName: UlColor.white] 


} 


在 UINavigationController 类 中 ，navigationBar 是 导航 控制 器 所 管理 的 导航 栏 对 象 ， 我 们 通过 它 去 自 定义 导航 栏 的 外 观 。titleTextAttributes 是 navigationBar 中 的 属性 ， 通 过 它 可 以 显示 或 者 设置 导航 
栏 中 title 的 属性 ， 包 括 字 体 、 字 号 、 文 字 颜 色 、 阴 影 颜 色 和 阴影 的 偏 移 量 。 它 是 字典 类 型 的 对 象 ， 我 们 可 以 使 用 text attribute keys (文本 属性 键 ) 来 进行 设置 。 


NSForegroundColorAttributeName 是 全 局 变量 ， 它 的 值 是 UIColor 类 型 ， 用 于 指定 文本 的 前 景色 ， 这 里 设置 为 白色 。 


步骤 4 在 viewDidLoad() 方 法 中 继续 添加 下 面 的 代码 : 


// 导航 栏 中 按钮 的 颜色 

self.navigationBar.tintColor = .white 
// 导航 栏 的 背景 色 
self.navigationBar.barTintColor = UIColor (red: 18.0/255.0, green: 86.0/255.0, blue: 136.0/255.0, alpha: 1) 


tintColor 属 性 用 于 设置 导航 栏 中 按钮 的 文本 颜色 ，barTintColor 则 是 设置 导航 栏 自身 的 颜色 ， 通 过 RGB 的 颜色 设置 ， 我 们 将 导航 栏 设 置 为 蓝 


步骤 5 在 viewDidLoad() 方 法 中 继续 添加 下 面 的 代码 : 


// 不 允许 透明 


self.navigationBar.isTranslucent = false 


navigationBar 的 isTranslucent 属 性 用 于 指定 导航 栏 是 否 透 明 ，true 为 透明 ，false 为 不 透明 。 


步骤 6 在 NavVC 中 重 写 preferredStatusBarStyle 属 性 : 


override var preferredStatusBarStyle: UIStatusBarStyle( 
return .lightContent 
} 


通过 重 写 preferredstatusBarstyle 属 性 设置 状态 栏 的 风格 ，lightContent 风 格 与 导航 栏 的 文字 风格 是 一 致 的 。 


构建 并 运行 项 目 ， 效 果 如 图 25-4 所 示 。 
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图 25-4 设置 导航 栏 后 的 效果 


25.3 ”美化 标 等 栏 


接 下 来 ， 我 们 需要 美化 标签 栏 控制 器 的 外 观 。 


步骤 在 TabBarVC 的 viewDidLoad( 方 法 中 添加 下 面 的 代码 : 


override func viewDidLoad() { 
super.viewDidLoad() 
// 每 个 Item 的 文字 颜色 为 白色 
self.tabBar.tintColor = .white 
// 标签 栏 的 背景 色 
self.tabBar.barTintColor = UIColor (red: 37.0/255.0, green: 39.0/255.0, blue: 42.0/255.0, alpha: 1) 
self.tabBar.isTranslucent - false 


与 之 前 导航 栏 的 外 观 类 似 ， 只 不 过 标签 栏 的 背景 色 为 黑色 。 


构建 并 运行 项 目 ， 效 果 如 图 25-5 所 示 。 
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25.4 调整 上 传 照 请 页 面 


图 25-5 设置 标签 栏 后 的 效果 


经 过 前 面 几 个 章节 的 完善 ， 现 在 这 个 Instagram 项 目 看 似 越 来 越 有 样 了 。 但 是 还 是 有 一 些 Bug 需 要 修补 。 如 果 此 时 你 在 模拟 器 中 点 开 UploadV5C 控 制 器 的 话 ， 就 会 发 现 Image View 和 TextView 被 下 移 
了 ， 如 图 25-6 所 示 ， 这 是 设置 了 导航 栏 不 透明 的 缘故 。Ul 控 件 的 下 移 让 用 户 体验 变 差 ， 所 以 需要 对 UploadVC 类 中 的 一 些 代 码 进行 调整 。 


步骤 1 
D 


图 25-6 ”有 问题 的 上 传 界面 


在 UploadVC 的 alignment() 方 法 中 ， 修 改 piclmg 的 frame 属 性 : 


picimg. 


frame = CGRect(x: 15, y: 15, width: width / 4.5, height: width / 4.5) 


这 里 将 Image View 的 y 值 设置 为 15。 


步骤 2 ”继续 修改 publishBtn 的 frame 属 性 : 


let wid 


th = self.view.frame.width 


et height = self.view.1 


Frame.height 


publish! 


Btn.frame = CGRect(x: 0, y: height - width / 8, width: width, height: width / 8) 


首先 将 控制 器 视图 的 高 度 赋值 给 height， 然 后 我 们 主要 调整 publishBtn 的 y 值 ， 因 为 导航 栏 和 标签 栏 均 不 透明 的 缘故 ， 使 得 height 的 高 度 等 于 视图 高 度 (此 时 不 包含 导航 栏 高 度 和 状态 栏 高 度 ) -标签 栏 
高 度 ， 控 制 器 视图 (0，0) 点 坐标 是 从 导航 栏 底 部 边缘 开始 的 ， 所 以 让 它 的 y 值 等 于 height-publishBtn 按 钮 高 度 即 可 。 


步骤 3 在 UploadVC 类 的 viewDidLoad() 方 法 中 删除 对 alignment( 的 调用 ， 并 在 UploadVC 类 中 重 写 一 个 新 的 方法 viewWillAppear(_:)。 


override func viewWillAppear( animated: Bool) { 
super.viewWillAppear (animated) 
alignment () 


} 


当 控 制 器 视图 将 要 在 屏幕 上 可 见 的 时 候 会 调用 该 方法 ， 与 ViewDidLoad() 方 法 不 同 ，viewDidLoad() 在 控制 器 视图 加 载 后 被 调用 ， 如 果 是 在 代码 中 创建 的 视图 加 载 器 ， 它 将 会 在 loadView () 方 法 执行 后 被 
调用 ， 如 果 是 从 故事 板 页 面 输出 ， 它 将 会 在 视图 设置 好 后 后 被 调用 ， 并 且 系统 对 该 方法 的 调用 在 控制 器 的 整个 生存 期 只 有 一 次 ， 而 viewWillAppear(_:) 方 法 则 会 被 多 次 调用 ， 只 要 从 不 可 见 切换 到 可 见 就 会 被 
调用 一 次 。 


构建 并 运行 项 目 ， 在 选择 好 照片 以 后 ， 当 再 次 单 击 Image View 的 时 候 ， 它 出 现 了 下 沉 的 情况 ， 如 图 25-7 所 示 。 
这 是 因为 在 zoomlmg() 方 法 中 ， 对 于 unzoomed 的 定义 与 之 前 的 不 一 致 了 。 


步骤 4 修改 zoomlmg() 方 法 中 unzoomed 的 代码 ， 将 y 值 修改 为 15。 


let unzoomed = CGRect(x: 15, y: 15, width: self.view.frame.width / 4.5, height: self.view.frame.width / 4.5) 


再 次 运行 项 目 ， 在 Image View 预 览 状 态 下 ， 我 们 发 现 放大 后 的 图 片 比较 靠 下 ， 这 还 是 因为 控制 器 视图 (0, 0) 点 下 移 的 原因 。 


步骤 5 ”修改 zoomlmdg() 方 法 中 zoomed 的 代码 ， 将 y 值 减 去 偏 移 量 。 


let zoomed = CGRect(x: 0, y: self.view.center.y - self.view.center.x - self.navigationController!.navigationBar.frame.height * 1.5, width: self.view.frame.width, height: self.v 


这 里 ， 我 们 让 Image View 的 y 值 再 减 去 (上 移 ) 导航 栏 高 度 的 1.5 倍 。 


步骤 6 ”修改 animate(withDuration:animations:) 闭 包 中 的 代码 ， 添 加 对 removeBtn 的 alpha 属 性 的 设置 。 


if piclImg.frame == unzoomed { 
UIView.animate (withDuration: 0.3, animations: { 


self.removeBtn.alpha = 0 
}) 
}else { 
UIView.animate (withDuration: 0.3, animations: { 


self.removeBtn.alpha = 1 


构建 并 运行 项 目 ， 效 果 如 图 25-8 所 示 。 


图 25-7 预览 图 片 时 出 现 的 问题 


图 25-8 修改 后 的 预览 图 片 显示 效果 


25.5 ”设置 标签 栏 中 的 ltem 


到 目前 为 止 , HomeVC 和 UploadVC 控 制 器 在 标签 栏 中 还 只 是 显示 两 个 文本 的 ltem， 接 下 来 我 们 将 对 这 部 分 进行 美化 。 


步骤 1 从 资源 文件 夹 中 拖 奥 home、home@2x、home@3x、upload、upload@2x、upload@3x 这 6 个 png 图 片 到 Instagram 项 目 之 中 ， 拷 贝 的 选项 和 之 前 的 保持 一 致 。 
步骤 2 在 项 目 导 航 中 同时 选中 这 6 个 新 添加 的 文件 ， 然 后 在 快捷 菜单 中 选择 New Group from Selection， 并 命名 该 Group 为 tabbar items, 


步骤 3 ”在 故事 板 中 选择 控制 个 人 主页 的 导航 控制 器 ， 单 击 底部 的 标签 后 在 Attributes Inspector 中 将 Title 设 置 为 我 的 ，Image 设 置 为 hnome.png。 选 择 控制 上 传 的 导航 控制 器 ， 在 Attributes Inspector 
中 将 Title 设 置 为 上 传 ，Image 设 置 为 upload.png。 


构建 并 运行 项 目 ， 效 果 如 图 25-9 所 示 。 


图 25-9 ”标签 栏 设置 后 的 效果 


本 章 小 结 


本 章 我 们 为 PostVC 中 的 三 个 按钮 定制 了 lcon， 并 且 还 定制 了 导航 栏 和 标签 栏 的 外 观 。 在 设置 外 观 的 时 候 ， 因 为 设置 了 isTranslucent 属 性 为 false， 所 以 在 Ul 控 件 位 置 的 设置 上 发 生 了 变化 ， 所 以 需要 在 
代码 中 进行 相应 的 调整 。 


另外 ， 本 章 所 提供 的 所 有 按钮 Icon 图 标 都 可 以 通过 Sketch 软件 手工 绘制 ， 请 扫 拉 下面 的 二 维 码 观 看 制作 lcon 图 标的 视频 教程 。 
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第 26 草 ”喜爱 按钮 的 功能 实现 


本 章 我 们 将 会 实现 用 户 与 PostVC 中 喜爱 按钮 的 交互 功能 。 


26.1 ”设置 喜爱 按钮 状态 及 显示 喜爱 的 数量 


步骤 1 进入 到 LeanCloud 云 端 控 制 台 ， 创 建 Likes 数 据 表 。 
步骤 2 在 Likes 数 据 表 中 添加 一 个 新 列 ， 列 名 称 为 td， 类 型 为 String.。 
步骤 3 ”再 添加 一 个 新 列 ， 列 名 称 为 by， 类 型 为 String.。 


步骤 4 回 到 Xcode， 在 PostVC 类 中 tableView( :cellForRowAt:) 方 法 的 最 后 ， 添 加 下 面 的 代码 : 


override func tableView( tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { 


// 根据 用 户 是 否 喜爱 维护 1ikeBtn 按 钮 
let didLike = AVQuery (className: "Likes") 
didLike?.whereKey("by", equalTo: AVUser.current ().username) 


didLike?.whereKey("to", equalTo: cell.puuidLbl.text) 
didLike?.countObjectsInBackground(( (count:Int, error:Error?) in 
if count == O ( 
cell.likeBtn.setTitle("unlike", for: .normal) 
cell.likeBtn.setBackgroundImage (UIImage (named: "unlike.png"), for: .normal) 
Jelse ( 
cell.likeBtn.setTitle("like", for: .normal) 
cell.likeBtn.setBackgroundImage (UIImage (named: "like.png"), for: .normal) 
} 
}) 
return cell 


在 上 面 的 代码 中 ， 我 们 创建 了 一 个 查询 对 象 ， 用 于 查询 LeanCloud 云 端的 Likes 表 中 ， 符 合 by 字 段 等 于 当前 用 户 ，to 字 段 是 当前 帖子 puuid 的 记录 。 如 果 查 询 到 的 记录 数 不 为 0， 则 设置 likeBtn 的 风格 为 
Like， 否 则 是 Unlike 风 格 。 


步骤 5 ”继续 在 步骤 4 的 代码 下 方 添加 代码 : 


// 计算 本 帖子 的 喜爱 总 数 

let countLikes =  AVQuery(className: "Likes") 

countLikes?.whereKey("to", equalTo: cell.puuidLbl.text) 

countLikes?.countObjectsInBackground(( (count:Int, error:Error?) in 
cell.likelbl.text = "\ (count)" 

}) 


26.2 ”实现 喜爱 按钮 的 交互 


接 下 来 ,我们 需要 在 PostCell 中 创建 likeBtn 按 钮 的 Action 关 联 ， 以 实现 用 户 与 按钮 之 间 的 交互 。 


步骤 1 在 故事 板 中 为 likeBtn 按 钮 与 PostCell 类 建立 Action 关 联 ， 方 法 名 称 为 likeBtn_clicked。 


IBAction func likeBtn clicked( sender: AnyObject) { 


—— (ce 


步骤 2 在 likeBtn_clicked( :) 方 法 中 获取 likeBtn 按 钮 的 Title。 


// 获取 LikeBtn 按 钮 的 Title 
let title = sender.title(for: .normal) 


步骤 3 在 likeBtn_clicked(_:) 方 法 中 添加 下 面 的 代码 : 


// 如 果 当 前 Dm es 则 将 该 帖子 设置 为 ]like 状 态 。 


if title == "unlike" 1 
let a c — AVObject(className: "Likes") 
object?["by"] = AVUser.current().username 
object?["to"] = puuidLbl.text 
object?.savelnBackground(( (success:Bool, error:Error?) in 


if success { 


print ("标记 为 : like! ") 
self.likeBtn.setTitle("like", for: .normal) 
self.likeBtn. ,SetBackgroundl Image (U mage (named: "like.png"), for: .normal) 


// 如 果 设 置 为 喜爱 ， 则 发 送 通 知 给 表格 视图 刷新 表格 


NotificationCenter.default.post(name: NSNotification.Name (rawValue: "liked"), object: nil) 


在 这 段 if 语句 的 代码 中 ， 如 果 当 前 likeBtn 的 状态 为 unlike， 则 生成 一 个 AVObject 类 型 的 对 象 ， 通 过 下 标的 形式 将 by 设置 为 当前 用 户 ，to 设 置 为 当前 帖子 的 uuid。 然 后 执行 AVObject 的 
savelnBackground(_:) 访 法 ， 在 方法 的 闭 包 中 ， 如 果 保 存 成 功 则 修改 likeBtn 按 钮 的 状态 ， 最 后 发 送 一 个 通知 ， 便 于 一 会 儿 刷 新 PostVC 中 的 表格 视图 。 


步骤 4 继续 在 likeBtn_clicked(_:) 方 法 中 添加 下 面 的 代码 : 


f title == "unlike" { 


H- 


// OR Likes dob nth 的 记录 
let query - AVQuery (className: "Likes") 
query?.whereKey("by", equalTo: AVUser.current ().username) 
query?.whereKey("to", equalTo: puuidLbl.text) 
query?.findObjectsInBackground(| (objects:[Any]?, error:Error?) in 
for object in objects! { 
// 搜索 到 记录 以 后 将 其 从 Likes 表 中 删除 
(object as AnyObject) .deleteInBackground({ (success:Bool, error:Error?) in 
if success ( 


print ("删除 1ike 记 录 ，disliked") 

self.likeBtn.setTitle("unlike", for: .normal) 
self.likeBtn.setBackgroundlImage (UIImage (named: "unlike.png"), for: .normal) 
// 如 果 设 置 为 喜爱 ， 则 发 送 通知 给 表格 视图 刷新 表格 


NotificationCenter.default.post(name: NSNotification.Name (rawValue: "liked"), object: nil) 


当 likeBtn 按 钮 的 状态 为 like， 则 会 执行 else 中 的 代码 。 首 先是 从 LeanCloud 云 端的 Likes 表 中 搜索 by 为 当前 用 户 ，to 为 当前 puuid 的 记录 。 然 后 通过 findObjectsInBackground( :) 方 法 得 到 AVObject 类 
型 的 记录 ， 再 通过 AVObject 类 的 deletelnBackground(_:) 方 法 将 其 从 Likes 表 中 删除 ， 当 成 功 删 除 以 后 接着 修改 likeBtn 按 钮 的 状态 ， 最 后 发 送 通知 让 PostVC 的 表格 视图 刷新 。 


在 PostVC 类 中 的 viewDidLoad() 方 法 中 添加 下 面 一 行 代码 : 


// 设置 当 PostVC 接 收 到 1iked 通 知 以 后 ， 执 行 Tefresh 方 法 
NotificationCenter.default.addObserver(self, selector: #selector (refresh), name: NSNotii 


Fication.Name.init(rawValue: "liked"), object: nil) 


在 PostVC 类 中 创建 新 的 方法 refresh0。 


func refresh() { 
self.tableView.reloadData () 


} 


在 构建 并 运行 项 目 之 前 还 有 几 个 Bug 需 要 修改 。 
在 PostCell 类 的 awakeFromNib() 方 法 中 ， 添 加 下 面 一 行 代码 : 


// 设置 1ikeBtn 按 钮 的 上 title 文字 的 颜色 为 无 色 
likeBtn.setTitleColor(.clear, for: .normal) 


这 里 我 们 将 likeBtn 按 钮 title 文 本 的 颜色 设置 为 无 色 ， 因 为 它 只 作为 程序 的 条 件 判断 使 用 ， 并 不 需要 它 显 示 到 屏幕 上 。 
在 故事 板 中 ， 选 中 likeBtn 按 钮 ， 在 Attributes Inspector 中 参看 Image 属 性 是 否 为 unlike.png， 如 果 是 则 将 其 删除 ， 然 后 在 Background 属 性 上 设置 unlike.png。 


© 主题 ”如 果 我 们 在 故事 板 中 将 likeBtn 的 Image 属 性 设置 为 unlike.png 图 片 ， 那 么 在 代码 中 不 管 我 们 如 何 调用 likeBtn 的 setBackgroundImage(image:for:) 都 会 被 位 于 前 景 的 unlike.png 图 片 遮盖 住 ， 给 我 们 的 感觉 
就 是 喜爱 按钮 没有 发 生 任 何 的 变化 。 


构建 并 运行 项 目 ， 选 择 一 个 帖子 照片 ， 然 后 单 击 Like 按 钮 ， 效 果 如 图 26-1 所 示 。 


0 | . 1 
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图 26-1 单 击 喜爱 按钮 的 前 后 效果 


26.3 ”实现 照片 的 双击 交互 


用 户 除了 可 以 与 Like 按 钮 交互 以 外 ， 还 可 以 通过 双击 照片 Image View 来 实现 交互 功能 。 


步骤 1 在 PostCell 类 的 awakeFromNib0 方 法 中 添加 下 面 的 代码 : 


// 双击 照片 添加 喜爱 

let likeTap = UITapGestureRecognizer (target: self, action: #selector (likeTapped)) 
likeTap.numberOfTapsRequired = 2 

picimg.isUserInteractionEnabled = true 

picimg.addGestureRecognizer (likeTap) 


在 上 面 的 代码 中 创建 了 一 个 单 击 手势 ， 当 双击 的 时 候 会 执行 likeTaped() 方 法 ， 最 后 把 该 手势 添加 到 piclmg 控 件 上 面 。 


步骤 2 ”在 PostCell 类 中 创建 一 个 新 的 方法 likeTapped()。 


func likeTapped() 

// 创 peser T 
let likePic = U mageView (image: UIImage (named: "unlike.png")) 
likePic.frame.size.width = picImg.frame.width / 1.5 
likePic.frame.size.height = picImg.frame.height / 1.5 
likePic.center = picImg.center 
likePic.alpha = 0.8 

self.addSubview (likePic) 
} 


在 该 方法 中 ， 首 先 创 建 一 个 Image View， 用 于 呈现 unlike.png 图 片 。 它 的 大 小 为 piclmage 的 273， 中 心 与 piclImg 一 致 ，alpha 值 为 0.8。 


步骤 3 在 likeTapped( 方 法 的 底部 继续 添加 代码 : 


// 通过 动画 隐藏 1ikePic 并 且 让 它 变 小 

UIView. Accu cr 0.4, animations: { 
likePic.alpha = 0 

likePic.transform = CGAffineTransform(scaleX: 0.1, y: 0.1) 


— 
— 


这 里 通过 动画 的 方式 ， 在 0.4 秒 的 时 间 将 likePic 的 alpha 值 从 0.8 变 为 0 (不 可 见 ) ， 再 将 大 小 缩小 到 之 前 的 十 分 之 一 。 


步骤 4 在 likeTapped() 方 法 中 继续 添加 代码 : 


let title = likeBtn.title(for: .normal) 
if title == "unlike" 1 
let object = AVObject(className: "Likes") 
object?["by"] = AVUser.current().username 
object?["to"] = puuidLbl.text 
object?.savelnBackground(( (success:Bool, error:Error?) in 


if success { 
print ("标记 为 : like! ") 
self. ikeBtn.setTitle("like", for: .normal) 
lf.likeBtn.setBackgroundlImage (UIImage (named: "like.png"), for: .normal) 
/7 如果 设 置 为 喜爱 ， 则 发 送 通知 经 给 表格 视图 刷新 表格 


NotificationCenter.default.post(name: Notification.Name(rawValue: "liked"), object: nil) 


如 果 当 前 likeBtn 的 title 是 unlike， 则 会 执行 if 语 句 中 的 代码 。 与 likeBtn_clicked :) 方 法 中 的 代码 类 似 ， 我 们 可 以 直接 复制 过 来 。 


构建 并 运行 项 目 ， 在 双击 piclmg 照 片 以 后 ， 效 果 如 图 26-2 所 示 。 
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图 26-2 ”双击 照片 后 的 动画 效果 


在 本 章 的 最 后 ， 我 们 还 要 实现 单 击 用 户 名 的 交互 功能 。 


的 。 


// 单 击 Username 按钮 
QIBAction func usernameBtn clicked( sender: AnyObject) { 


之 前 我 们 是 将 Like 按 钮 与 PostCell 类 建立 Action 关 联 ， 为 什么 username 按 钮 却 需要 在 PostVC 中 建立 Action 关 联 呢 ? 


这 是 因为 当 用 户 在 单 击 usetname 按 钮 以 后 ， 要 通过 导航 控制 器 进入 到 相应 的 个 人 主页 或 访客 主页 ， 这 个 功能 需要 在 UTViewController 或 其 子 类 中 实现 ， 但 是 在 PostCell 类 (继承 于 UIView) 中 是 无 法 实现 


在 PostVC 类 中 的 tableView( :cellForRowAt:) 方 法 最 后 的 return cell 语 句 的 上 面 ， 添 加 下 面 的 代码 : 


// 将 indexPath 赋 值 给 usernameBtn 的 LayeLr 属 性 的 自 定 义 变量 
cell.usernameBtn.layer.setValue(indexPath, forKey: "index") 
return cell 


这 里 ， 我 们 为 每 一 个 usernameBtn 都 打上 了 一 个 标记 ， 该 标记 记录 了 单元 格 的 indexPath 值 ， 在 之 后 的 usernameBtn_clicked(_:) 方 法 中 会 用 到 这 个 indexPath 值 。 


步骤 3 ”在 usernameBtn_clicked( :) 方 法 中 ， 添 加 下 面 的 代码 : 


QIBAction func usernameBtn clicked( sender: AnyObject) { 
// 按钮 的 index 
let i = sender.layer.value(forKey: "index") as! IndexPath 


// 通过 i 获取 到 用 户 所 单 击 的 单元 格 


et cell = tableView.cellForRow(at: i) as! PostCell 
// 如 果 当 前 用 户 单 击 的 是 自己 的 Username， 则 调用 HomeVC， 否 则 是 GuestVC 
if cell.usernameBtn.titleLabel?.text == AVUser.current().username { 


let home = self.storyboard?.instantiateViewController (withldentifier: "HomeVC") as! HomeVC 


P- 


self.navigationController?.pushViewController (home, animated: true) 
}else { 
let guest = self.storyboard?.instantiateViewController (withIdentifier: "GuestVC") as! GuestVC 
self.navigationController?.pushViewController(guest, animated: true) 
} 
} 


在 该 方法 中 ， 通 过 用 户 所 单 击 的 按钮 获取 到 用 户 所 单 击 的 单元 格 对 象 。 如 果 单 击 的 username 是 当前 用 户 自 己 的 ， 则 通过 导航 控制 器 推出 HomeVC 控 制 器 ， 否 则 推出 GuestVC 控 制 器 。 


构建 并 运行 项 目 ， 程 序 完美 运行 ! 


本 章 小 结 


在 本 章 中 我 们 实现 了 喜爱 按钮 与 用 户 的 交互 功能 ， 包 括 直接 单 击 按钮 后 的 状态 修改 和 单 击 其 上 方 的 Image View 控 件 后 状态 的 修改 。 在 实现 第 二 种 方式 的 交互 时 ， 还 利用 了 UIView 的 动画 功能 增强 了 用 
户 体验 ， 刺 激 用 户 更 多 地 去 参与 到 类 似 的 评价 之 中 。 


第 27 章 ”创建 用 户 评 论 界面 


从 本 章 开 始 我 们 将 要 实现 帖子 的 评论 功能 ， 也 就 是 在 PostVC 中 单 击 评论 按钮 后 所 要 实现 的 功能 。 


27.1 创建 评论 控制 器 的 用 户 界 面 


步骤 1 在 故事 板 的 对 象 库 中 拖 钨 1 个 View Con-troller 到 编辑 区 域 。 


步骤 2 从 对 象 库 拖 蝶 1 个 Table View 到 新 建 控制 器 的 视图 之 中 ， 大 小 和 位 置 如 图 27-1 所 示 。 


图 27-1 添加 Table View 控 件 


Qum AREER A Table View， 而 不 是 Table View Controller。 这 里 可 能 你 会 有 疑问 : 为 什么 不 直接 新 建 1 个 Table View Controller 呢 ? 评论 页 面 中 最 主要 的 不 就 是 表格 吗 ? 其 实 ， 在 评论 视图 中 不 
仅 要 有 表格 视图 ， 还 要 有 用 于 输入 评论 的 Text View 和 发 表 评 论 的 Button。 与 其 使 用 Table View Controller 然 后 再 去 修改 ， 还 不 如 通过 标准 的 View Conttollet 去 搭建 具有 发 送 评论 功能 的 表格 视图 方便 。 


步骤 3 ”从 对 象 库 拖 擅 1 个 Text View 到 Table View 的 下 方 ， 在 Attributes Inspector 中 清空 Text 的 内 容 ， 并 将 Background 设 置 为 Group Table View Background Color， 最 后 调整 大 小 和 位 置 如 图 27- 
2 所 示 。 


步骤 4 从 对 象 库 拖 电 1 个 Button 到 Text View 的 右 侧 ，Title 设 置 为 发 送 ， 字 体 设置 为 粗 体 ， 大 小 和 位 置 如 图 27-3 所 示 。 


图 27-2 ”在 控制 器 视图 中 添加 Text View 


图 27-3 ”在 控制 器 视图 中 添加 Button 
步骤 5 选中 Table View， 在 Attributes Inspector 中 将 Prototype Cells 设 置 为 1， 在 Size Inspector 中 将 Row Height 设 置 为 60。 
步骤 6 ”从 对 象 库 拖 帅 1 个 Image View 到 新 设置 的 Cell 之 中 ， 在 Size Inspector 中 将 x 和 y 均 设置 为 10，width 和 height 均 设置 为 40， 在 Attributes Inspector 中 将 Image 设 置 为 pp.jpg， 如 图 27-4 所 示 。 


步骤 7” 再 拖 蜗 1 个 Button 到 Image View 的 右 人 出 ， 字 号 设置 为 14， 左 对 齐 ，Title 设 置 为 usernameBtn， 大 小 和 位 置 如 图 27-5 所 示 。 


图 27-4 ”在 Cell 中 添加 Image View 


L] 
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图 27-5  f&£Cell P 2& Ju Button 
步骤 8 再 拖 忠 1 个 Label 到 Button 的 下 方 ， 字 号 设置 为 14，Text 设 置 为 commentLbl，Lines 设 置 为 0， 因 为 考虑 到 多 行 显示 的 问题 ， 如 图 27-6 所 示 。 


步骤 9 最 后 再 拖 忠 1 个 Label 到 Button 的 右 侧 ， 用 于 显示 评论 与 当前 的 时 间 间 隔 。 字 号 设置 为 12，Color 设 置 为 Light Gray Color，alignment 设 置 为 右 对 齐 ，Text 设 置 为 2h， 如 图 27-7 所 示 。 


usernameBtn 
zommentLbi 


图 27-6 ”在 Cell 中 添加 Label 
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commentLbl 


图 27-7 在 Cell 中 添加 第 二 个 Label 


27.2 ”完善 用 户 界面 代码 


步骤 1 在 Instagram 项 目 中 创建 一 个 新 的 Cocoa Touch Class 文 件 ，Subclass of 设置 为 UIViewController，Class 为 CommentVC。 再 创建 一 个 Cocoa Touch Class 文 件 ，Subclass of 设置 为 
UlTableViewCell，Class 为 CommentCell。 


步骤 2 在 故事 板 中 将 新 创建 的 View Controller 的 Class 设 置 为 CommentVC， 将 其 表格 视图 中 的 单元 格 的 Class 设 置 为 CommentCell， 并 且 在 Attributes Inspector 中 将 ldentifier 设 置 为 Cell。 


步骤 3 ”将 Xcode 切 换 到 助手 编辑 器 模式 ， 建 立 表 格 视图 与 CommentVC 类 的 Outlet 关 联 ，Name 设 置 为 tableView。 


class CommentVC: UIViewController { 
QIBOutlet weak var tableView: CommentCell! 


步骤 4 建立 TextView、Button 与 CommentVC 类 的 Outlet 关 联 ，Name 设 置 为 CommentTxt 和 sendBtn。 


IBOutlet weak var commentTxt: UITextView! 
IBOutlet weak var sendBtn: UIButton! 


DD 


步骤 5 在 CommentVC 类 中 添加 一 个 属性 ， 用 于 表格 视图 的 刷新 。 


class CommentVC: UIViewController { 


var refresher - UIRefreshControl () 


步骤 6 在 refresher 变 量 声明 的 下 方 再 添加 三 个 属性 的 声明 。 


// 重 置 UI 的 上 默认 值 

var tableViewHeight: CGFloat = 0 
var commentY: CGFloat = 0 

var commentHeight: CGFloat - 0 


其 中 ，tableViewHeight 用 于 记录 控制 器 中 表格 视图 的 高 度 值 ， 因 为 表格 视图 的 高 度 值 会 随 着 虚拟 键盘 的 出 现 而 发 生 改变 ， 所 以 需要 记录 之 前 的 表格 高 度 。commentY 用 于 记录 评论 输入 框 的 Y 方 向 的 
位 置 ， 表 格 视 图 的 高 度 变化 ， 也 会 影响 到 评论 输入 框 Y 方 向 位 置 的 变化 。commentHeight 则 用 于 记录 评论 输入 框 的 高 度 ， 因 为 当 用 户 输入 多 行 评 论 信 息 后 ， 我 们 需要 让 Text View 的 高 度 值 增加 。 


步骤 7 在 CommentVC 类 的 外 部 声明 两 个 全 局 变量 。 


var commentuuid = [String] () 
var commentowner = [String] () 
class CommentVC: UIViewController { 


步骤 8 在 CommentVC 类 中 新 建 一 个 alignment() 方 法 。 


// xp 5 UI 控 件 

func alignment() { 
let width = self.view.frame.width 

let height = self.view.frame.height 

tableView.frame = CGRect(x: 0, y: 0, width: width, height: height / 1.096 - self.navigationController!.navigationBar.frame.height - 20) 


) 


在 该 方法 中 ， 首 先 获取 了 当前 控制 器 视图 的 宽度 和 高 度 。 注 意 ， 因 为 我 们 在 NavVC 中 将 导航 视图 的 isTranslucent 设 置 为 false， 所 以 CommentVC 控 制 器 的 视图 的 (0, 0) 点 左上 角 的 位 置 是 在 导航 栏 
的 底部 (左下 角 ) 开始 计算 的 。 但 即便 是 这 样 ，CommentVC 控 制 器 视图 的 高 度 依旧 是 屏幕 的 高 度 ， 比 如 在 iPhone 6 设备 上 的 height 还 是 667 点 ， 如 图 27-8 所 示 。 


导航 栏 高 度 


屏幕 高 度 
iPhone 6 是 667 点 E 
控制 器 视图 的 可 出局 度 
( = 视图 高 度 -导航 栏 高 度 ) 控制 器 视图 高 度 
IPhone 655667 rà 


图 27-8 控制 器 相关 视图 的 高 度 


我 们 在 设置 表格 视图 高 度 的 时 候 ， 本 身 它 的 高 度 要 小 于 控制 器 视图 的 高 度 ， 因 为 还 要 放置 Text View， 所 以 用 height 除 以 1.096， 此 时 的 表格 视图 底部 还 可 能 会 超出 屏幕 的 底部 边缘 ， 因 为 控制 器 的 视图 
是 从 导航 栏 底部 算 起 的 ， 所 以 要 再 减 去 导航 栏 的 高 度 。 这 还 不 够 ， 我 们 要 让 表格 视图 上 下 各 留 10 个 点 的 空白 ， 所 以 再 减 去 20 个 点 。 


步骤 9 在 alignment( 方 法 中 继续 添加 下 面 一 行 代码 : 


commentTxt.frame = CGRect(x: 10, y: tableView.frame.height + height / 56.8, width: width / 1.306, height: 33) 


评论 输入 框 的 y 值 是 表格 视图 的 高 度 再 加 上 动态 的 比例 值 height 除 以 56.8， 其 宽度 也 是 动态 的 屏幕 宽度 除 以 1.306， 高 度 固 定 为 33。 


步骤 10 ”继续 添加 下 面 一 行 代码 : 


sendBtn.frame = CGRect(x: commentTxt.frame.origin.x + commentTxt.frame.width + width / 32, y: commentTxt.frame.origin.y, width: width - (commentTxt.frame.origin.x + commentTxt. 


发 送 按钮 的 x 值 是 评论 Text View 左 边缘 加 上 评论 Text View 的 宽度 ， 再 加 上 一 个 动态 间隔 值 (width/32) 。y 值 与 评论 Text View 的 y 值 一 致 。 发 送 按钮 的 宽度 = 屏幕 宽度 -评论 Text View 左 边缘 与 评论 
Text View 的 宽度 -两 个 动态 间隔 宽度 (发送 按钮 两 侧 的 间隔 ) 。 


步骤 11 在 alignment() 方 法 的 最 后 ， 我 们 需要 记录 一 些 天 键 位 置 的 初始 值 ， 以 备 之 后 使 用 。 


// 记录 三 个 初始 值 

tableViewHeight = tableView.frame.height 
commentHeight = commentTxt.frame.height 
commentY = commentTxt.frame.origin.y 


步骤 12 ”在 viewDidLoad() 方 法 中 调用 alignment() 方 法 。 


override func viewDidLoad() { 
super.viewDidLoad() 
alignment () 


步骤 13  EREviewWillAppear( :) 方 法 。 


// 控制 器 视图 出 现在 屏幕 上 调用 的 方法 

override func viewWillAppear( animated: Bool) { 
// 隐藏 底部 标签 栏 
self.tabBarController?.tabBar.isHidden = true 
// iet 


self.commentTxt.becomePFirstResponder () 


在 该 方法 中 ， 首 先 让 位 于 底部 的 标签 栏 隐 藏 ， 然 后 让 commentTxt 变 成 焦点 ， 成 为 当前 的 响应 对 象 ， 虚 拟 键盘 出 现 。 


步骤 14 重 写 viewWillDisappear(_:) 方 法 ， 当 控制 器 视图 从 屏幕 消失 时 让 标签 栏 出 现 。 


override func viewWillDisappear( animated: Bool) { 
self.tabBarController?.tabBar.isHidden = false 


} 


27.3 ”在 PostVC 中 实现 评论 按钮 的 交互 


在 PostVC 中 ， 当 用 户 单 击 评论 按钮 以 后 会 推出 CommentVC 控 制 器 ， 所 以 在 PostVC 控 制 器 中 还 要 实现 与 评论 按钮 的 交互 功能 。 


步骤 1 为 PostVC 视 图 的 评论 按钮 建立 Action 关 联 ，Name 设 置 为 commentBtn_clicked。 


IBAction func commentBtn clicked( sender: AnyObject) { 


— (eO 


zUE2 与 之 前 的 usernameBtn 的 处 理 方 法 类 似 ， 在 tableView( :cellForRowAt:) 方 法 中 ， 添 加 下 面 的 代码 : 


// 将 indqexPath 赋 值 给 commentBtn 的 Layez 属 性 的 自 定 义 变量 
cell.commentBtn.layer.setValue(indexPath, forKey: "index") 


步骤 3  fecommentBtn clicked( :) 方 法 中 ， 获 取 用 户 所 单 击 的 单元 格 对 象 。 


(S 


IBAction func commentBtn clicked( sender: AnyObject) { 
let i = sender.layer.value(forKey: "index") as! IndexPath 
let cell = tableView.cellForRow(at: i) as! PostCell 


c 


commentBtn clicked( :) 方 法 中 的 sender 参 数 就 是 用 户 所 单 击 的 评论 按钮 ， 通 过 sender.layer 的 value(forKey:) 方 法 获取 到 IndexPath 类 型 的 对 象 ， 进 而 获取 到 用 户 所 单 击 的 单元 格 对 象 。 通 过 单元 格 对 
象 就 可 以 获取 到 帖子 的 uuid 了 。 


步骤 4 在 commentBtn_clicked( :) 方 法 中 ， 继 续 添加 代码 。 


// 发 送 相关 数据 到 全 局 变量 
commentuuid.append (cell.puuidLbl.text!) 
commentowner.append(cell.usernameBtn.titleLabel!.text!) 


这 里 会 将 当前 帖子 的 uuid 存 储 到 commentuuid 数 组 中 ， 将 当前 帖子 的 发 布 者 存储 到 commentowner 数 组 中 。 


步骤 5 在 commentBtn_clicked( :) 方 法 的 最 后 添加 下 面 的 代码 。 


// 通过 导航 控制 器 推出 评论 控制 器 
let comment = self.storyboard?.instantiateViewController (withIdentifier: "CommentVC") as! CommentVC 
self.navigationController?.pushViewController (comment, animated: true) 


步骤 6 在 故事 板 中 ， 选 中 CommentVC 控 制 器 ， 在 ldentity Inspector 中 确定 Storyboard ID 为 CommentVC。 


构建 并 运行 项 目 ， 效 果 如 图 27-9 所 示 。 


图 27-9 ”评论 页 面 的 显示 效果 


27.4 ”对 CommentCell 的 控件 布局 


接 下 来 ， 我 们 需要 对 评论 控制 器 的 单元 格 进行 布局 。 


步骤 1 将 Xcode 切换 到 助手 编辑 器 模式 ， 将 单元 格 中 的 四 个 UI 控件 与 CommentCell 类 建立 Outlet 关 联 ，Name 分 别 设置 为 : avalmg、usernameBtn、commentLbl 和 dateLbl。 


// UI Objects 
@IBOutlet weak var avalmg: UIImageView! 
QIBOutlet weak var usernameBtn: UlButton! 
QIBOutlet weak var commentLbl: UILabel! 
QGIBOutlet weak var dateLbl: UILabel! 


步骤 2 ”在 CommentCell 类 的 awakeFromNib() 方 法 中 ， 添 加 下 面 的 代码 : 


override func awakeFromNib() ( 
super.awakeFromNib() 
// alignment 
avalmg.translatesAutoresizingMaskIntoConstraints = false 
usernameBtn.translatesAutoresizingMaskIntoConstraints - false 
commentLbl.translatesAutoresizingMaskIntoConstraints = false 
dateLbl.translatesAutoresizingMaskIntoConstraints = false 


因为 需要 动态 地 计算 每 个 单元 格 的 高 度 ， 所 以 仿照 之 前 的 PostCell 类 ， 先 将 所 涉及 控件 的 translatesAutoresizingMasklntoConstraints 属 性 设置 为 false， 这 样 就 可 以 对 它们 应 用 自动 布局 特性 了 。 


步骤 3 在 awakeFromNib() 方 法 中 继续 添加 代码 : 


// 添加 约束 

self.contentView.addConstraints (NSLayoutConstraint.constraints( 
withVisualFormat: "V:|-5-[username]- (-2)- [comment] -5-| ", 
options: [], metrics: nil, 
views: ["username": usernameBtn, 


"comment": commentlLbl])) 


这 里 在 垂直 方向 上 ， 让 usernameBtn 距 离 父 视图 顶部 5 个 点 ， 在 -2 个 点 的 间隔 (相当 于 向 上 2 个 点 ) 放置 commentLbl，commentLbl 距 离 底部 5 个 点 。 
Qi 除了 两 个 UI 控件 以 外 ， 所 有 的 间隔 和 顶部 都 是 固定 值 ，usernameBtn 和 commentLbl 会 根据 自身 的 约束 进行 调整 ， 从 而 实现 动态 高 度 调整 的 效果 。 


步骤 4 再 添加 两 个 垂直 方向 的 约束 代码 : 


self.contentView.addConstraints (NSLayoutConstraint.constraints( 
withVisualFormat: "V:|-15-[date]", 
options: [], metrics: nil, views: ["date": dateLbl])) 
self.contentView.addConstraints (NSLayoutConstraint.constraints( 
withVisualFormat: "V:|-10-[ava(40)]", 
options: [], metrics: nil, views: ["ava": avalImg])) 


第 一 行 是 让 dateLb| 距 离 顶部 15 个 点 ， 第 二 行 是 让 avalmg 距 离 顶部 10 个 点 ， 自 身高 度 是 40 个 点 。 
步骤 5 ”再 添加 三 个 水 平方 向 的 约束 代码 : 
self.contentView.addConstraints (NSLayoutConstraint.constraints( 
withVisualFormat: "H:|-10-[ava(40)]-13-[comment]-20-|", 
options ], metrics: nil, views: ["ava": avalmg, "comment": commentLbl])) 
self.contentView.addConstraints (NSLayoutConstraint.constraints( 
withVisualFormat: "H:[ava]-13-[username]", 
options: [], metrics: nil, views: ["ava": avalmg, "username": usernameBtn])) 
self.contentView.addConstraints (NSLayoutConstraint.constraints( 
withVisualFormat: "H:[date]-10-|", 
options: [], metrics: nil, views: ["date": datelbl])) 


第 一 行 是 让 头像 Image View 距 左 侧 10 个 点 ，Image View 本 身 40 个 点 ， 再 距离 13 个 点 是 CommentLbl， 与 父 视 图 右 侧 有 20 个 点 的 间隔 。 
第 二 行 是 让 头像 Image View 与 usernameBtn 有 13 个 点 的 间隔 。 
第 三 个 是 让 dateLb 与 父 视图 右 侧 边 缘 有 10 个 点 间隔 。 


步骤 6 在 约束 代码 的 最 后 让 头像 lmage View 变 为 圆 形 。 


.frame.width / 2 


avalmg.layer.cornerRadius = 
avalmg.clipsToBounds = true 


avalmg 


27.5 ”实现 评论 控制 器 的 功能 代码 


步骤 1 在 CommentVC 类 中 的 viewDidLoad() 方 法 中 ， 添 加 下 面 的 代码 : 

self.navigationltem.title = "评论 " 

self.navigationlItem.hidesBackButton = true 

let backBtn = UIBarButtonlItem(title: "返回 ", style: .plain, target: self, action: fselector(back( :))) 
self.navigationlItem.leftBarButtonItem = backBtn 

// 在 开始 的 时 候 ， 人 禁止 sendqBtn 按 钮 


lf.sendBtn.isEnabled = false 


通过 上 面 的 代码 重新 定义 了 导航 栏 中 的 title， 以 及 左 侧 的 返回 按钮 。 并 且 在 开始 的 时 候 茶 止 sndBtn 按 钮 ， 因 为 此 时 Text View 中 还 没有 输入 内 容 。 


步骤 2 ”在 上 面 代码 的 下 边 添加 滑动 手势 代码 : 


let backSwipe = UISwipeGestureRecognizer (target: self, action: #selector (back( 
backSwipe.direction = .right 
self.view.isUserInteractionEnabled = true 
self.view.addGestureRecognizer (backSwipe) 


:) ) ) 


当 用 户 在 评论 页 面 中 向 右 滑动 手指 的 时 候 也 实现 返回 功能 。 


步骤 3 在 CommentVC 类 中 实现 back( :) 方 法 。 


func back( sender: UIBarButtonItem) { 
= self.navigationController?.popViewController (animated: 
// 从 数组 中 清除 评论 的 uuid 
if !commentuuid.isEmpty { 
commentuuid.removeLast () 


true) 


} 

// 从 数组 中 清除 评论 所 有 者 

if !commentowner.isEmpty { 
commentowner.removeLast () 


} 
} 


当 用 户 单 击 返 回 按钮 以 后 ， 会 退回 到 之 前 的 控制 器 ， 并 且 从 两 个 评论 相关 的 数组 中 移 除 数据 。 


在 viewDidLoad() 方 法 中 添加 对 键盘 的 控制 。 


// 如 果 键 盘 出 现 或 消失 ， 捕 获 这 两 个 消息 


NotificationCenter.default.addObserver(self, selector: #selector (keyboardWillShow( :)), name: Notification.Name.UIKeyboardWi] 


NotificationCenter.default.addObserver(self, selector: t4selector(keyboardWillHide( :)), name: Notification.Name.UIKeyboardWi] 


lShow, object: 


在 CommentVC 类 中 创建 一 个 新 的 属性 Keyboard。 


class CommentVC: UIViewController { 


// 存储 keyboard 大 小 的 变量 
var keyboard = CGRect () 


Cl m) 


lHide, object: 


nil 


| 
— 


— 


在 CommentVC 类 中 创建 keyboardWillShow( :)757X. 


// 当 键 盘 出 现 的 时 候 会 调用 该 方法 
func keyboardWillShow( notification: Notification) { 
// 获取 到 键盘 的 大 小 
let rect = (notification.userInfo! [UIKeyboardFrameEndUserInfoKey]!) as! NSValue 
keyboard = rect.cgRectValue 


在 keyboardWillshow(_:) 方 法 中 继续 添加 下 面 的 代码 : 


UIView.animate (withDuration: 0.4, animations: (() -> Void in 
self.tableView.frame.size.height = self.tableViewHeight - self.keyboard.height 
self.commentTxt.frame.origin.y = self.commentY - self.keyboard.height 
self.sendBtn.frame.origin.y = self.commentTxt.frame.origin.y 


)) 


在 动画 中 ， 我 们 需要 让 表格 视图 的 高 度 和 评论 Text View 的 位 置 缩减 一 个 键盘 的 高 度 。 


在 CommentVC 类 中 创建 keyboardWillHide( :) 方 法 。 


UIView.animate (withDuration: 0.4, animations: (() -> Void in 
lf.tableView.frame.size.height = self.tableViewHeight 


self.commentTxt.frame.origin.y = self.commentY 
self.sendBtn.frame.origin.y = self.commentY 


func keyboardWillHide( notification: Notification) { 


这 里 还 是 通过 动画 的 方式 让 三 个 UI 控件 的 大 小 和 位 置 还 原 到 初始 状态 。 


为 了 更 好 地 观察 表格 视图 在 键盘 出 现 后 的 效果 ， 在 CommentVC 类 的 viewDidLoad0 方 法 中 添加 下 面 一 行 代 码 : 


self.tableView.backgroundColor = .red 


最 后 在 alignment0 方 法 中 ， 添 加 下 面 的 代码 ， 从 而 实现 单元 格 高 度 的 动态 调整 和 评论 输入 框 的 圆 角 效果 。 


tableView.estimatedRowHeight = width / 5.33 

tableView.rowHeight = UITableViewAutomatic-Dimension 

// 旧 有 代码 ， 确 定 commentTxt 的 位 置 

commentTxt.frame = CGRect(x: 10, y: tableView.frame.height + height / 56.8, width: width / 1.306, height: 33) 
commentTxt.layer.cornerRadius = commentTxt.frame.width / 50 


构建 并 运行 项 目 ， 效 果 如 图 27-10 所 示 。 


图 27-10 评论 控制 器 页 面 的 显示 效果 


之 前 的 标签 栏 留 下 的 ， 通 过 UIApplication 的 window 属 性 ， 我 们 将 它 设 置 为 白色 。 


目前 底部 的 黑色 背景 是 
步骤 10 在 AppDelegate 类 中 的 application( :did-FinishLaunchingWithOptions:) 方 法 中 ， 添 加 下 面 一 行 代码 : 
window?.backgroundColor = .white 


再 次 构建 并 运行 项 目 ， 效 果 如 图 27-11 所 示 。 
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图 27-11 评论 控制 器 页 面 修改 后 的 效果 


在 这 一 章 中 ， 我 们 创建 了 评论 视图 控制 器 ， 虽 然 该 控制 器 主要 实现 的 是 表格 功能 ， 但 是 因为 涉及 输入 ， 所 以 使 用 的 是 普通 视图 控制 器 ， 然 后 再 为 其 添加 表格 视图 。 除 了 手工 集成 表格 视图 以 外 ， 我 们 还 
利用 自动 布局 特性 设置 了 评论 视图 单元 格 的 控件 布局 ， 以 及 根据 键盘 的 情况 动态 调整 表格 视图 的 高 度 。 
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本 章 我 们 将 重点 放 在 评论 页 面 的 Text View 控 件 上 ， 目 前 当 用 户 在 Text View 中 输入 文本 信息 的 时 候 ， 不 管 输 入 多 少 行 信息 ， 都 保持 着 Text View 的 高 度 不 变 ， 而 我 们 希望 可 以 在 换行 的 时 候 动 态 改变 
Text View 的 高 度 。 


SFT evt Vite THS 
28.1 ”实现 Text View 的 功能 


步骤 1 在 CommentVC 类 的 声明 中 加 上 对 UITextViewDelegate 协 议 的 支持 。 


class CommentVC: UIViewController, UITextViewDelegate { 
func alignment() { 
commentTxt.delegate = self 
} 
} 


在 alignment() 方 法 中 设置 commentTxt 的 delegate 属 性 ， 这 样 用 户 在 输入 信息 的 时 候 ，CommentVC 类 就 可 以 获取 到 相关 信息 了 。 


1- 


步骤 2 在 CommentVC 类 中 添加 Text View 的 协议 方法 。 


// 当 输 入 的 时 候 会 调用 该 方法 
func textViewDidChange( textView: UITextView) { 
// 如 果 没 有 输入 信息 则 禁止 按钮 
let spacing = CharacterSet.whitespacesAndNewlines 
if !commentTxt.text.trimmingCharacters (in: spacing).isEmpty { 


sendBtn.isEnabled = true 
Jelse { 
sendBtn.isEnabled = false 


} 
} 


Ce 当 用 户 修 改 指定 Text View 的 文本 内 容 时 会 调用 该 方法 。 在 该 方法 中 ， 首 先 将 textView (也 就 是 commentTxt) 的 text 除 去 两 端的 空格 和 
换行 ， 然 后 再 判断 是 否 为 空 ， 最 后 根据 情况 设置 帮 送 按钮 的 有 效 性 。 


构建 并 运行 项 目 ， 只 输入 空格 和 回 车 ， 发 送 按钮 始终 是 禁止 状态 ， 当 输入 字符 以 后 按钮 变 为 有 效 状态 ， 如 图 28-1 所 示 。 
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图 28-1 不 同 输入 内 容 影响 发 送 按钮 的 状态 
接 下 来 ， 我 们 将 要 实现 根据 输入 段落 动态 调整 Text View 的 高 度 的 功能 。 


步骤 3 ”在 textViewDidChange( ;) 方 法 中 继续 添加 下 面 的 代码 : 


pis 


f textView.contentSize.height > textView.frame.height && textView.frame.height < 130 { 
let difference = textView.contentSize.height - textView.frame.height 

textView.frame.origin.y = textView.frame.origin.y - difference 

textView.frame.size.height = textView.contentSize.height 


如 果 textView 内 部 的 真正 内 容 尺 寸 (contentSize) 的 高 度 大 于 它 的 实际 尺寸 高 度 ， 并 且 实 际 尺 寸 高 度 又 小 于 130 点 ， 则 执行 站 语句 中 的 代码 。 


在 if 语句 中 ， 计 算出 contentSize 的 高 度 与 frame 的 高 度 差 ， 然 后 将 textView 的 y 值 减 去 这 个 差 ， 并 且 将 textView 的 frame 高 度 值 修改 为 它 的 contentSize 高 度 值 。 经 过 这 三 行 代码 的 调整 ， 评 论 输入 框 会 
在 条 件 允 许 的 情况 下 变 高 ， 与 此 同时 y 的 位 置 也 会 提升 。 


步骤 4 在 步骤 3 的 if 语句 的 内 部 ， 再 添加 下 面 的 代码 : 


// 将 tableView 的 下 边缘 上 移 
if textView.contentSize.height + keyboard. height + commentY >= tableView.frame.height { 
tableView.frame.size.height = tableView.frame.size.height - difference 


} 


在 符合 条 件 的 情况 下 减少 表格 视图 的 高 度 值 。 


接 下 来 ， 我 们 需要 处 理 段 落 减少 的 情况 。 


步骤 5 ”与 步骤 3 中 的 if 语句 呼应 ， 添 加 一 个 else if 语句 。 
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f textView.contentSize.height > textView.frame.height && textView.frame.height < 130 { 


}else if textView.contentSize.height < textView.frame.height { 


let difference = textView.frame.height - textView.contentSize.height 
textView.frame.origin.y = textView.frame.origin.y + difference 
textView.frame.size.height = textView.contentSize.height 


// 上 移 tableView 
if textView.contentSize.height + keyboard. height + commentY > tableView.frame.height { 
tableView.frame.size.height = tableView.frame.size.height + difference 
) 
) 


与 之 前 的 增加 textView 的 高 度 类 似 ， 这 里 的 代码 是 处 理 textView 高 度 值 减 小 的 情况 ， 同 时 让 表格 视图 的 高 度 增 加 。 


构建 并 运行 项 目 ， 不 管 是 否 出 现 键盘 ，Text View 都 会 根据 情况 动态 改变 其 高 度 ， 如 图 28-2 所 示 。 
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图 28-2 根据 用 户 输入 的 情况 动态 调整 Text View 的 高 度 


除了 在 CommentVC 类 中 实现 UITextViewDelegate 协 议 以 外 ， 还 需要 实现 表格 操作 的 相关 功能 。 


在 CommentVC 类 的 声明 中 加 上 对 UlTableViewDelegate 和 UlTableViewDataSource 协 议 的 支持 。 
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class CommentVC: UIViewController, UlTextViewDelegate, UlTableViewDelegate, UlTableViewDataSource { 


在 alignment() 方 法 中 添加 对 tableView 的 delegate 和 dataSource 属 性 的 赋值 ， 使 CommentVC 成 为 tableView 的 委托 对 象 和 数据 源 。 


func alignment() { 
commentTxt.delegate = self 
tableView.delegate = self 
tableView.dataSource - self 


在 CommentVC 类 中 添加 4 个 属性 ， 当 从 LeanCloud 云 端 下 载 数据 记录 以 后 ， 会 将 记录 信息 分 别 存储 到 这 些 数 组 之 中 。 


class CommentVC: UIViewController, UITextViewDelegate, UlTableViewDelegate, UITableViewDataSource { 
// 将 从 云端 获取 到 的 数据 写 进 数 组 
Var usernameArray = [String] () 
var avaArray = [AVFile] () 
var commentArray = [String] () 
var dateArray = [Date] () 


接 下 来 ， 我 们 需要 实现 tableView 相 关 协 议 的 几 个 方法 。 


在 CommentVC 类 中 添加 func tableView( :numberOfRowslnsection:) 协 议 方法 。 


numberOfRowsInSection: ) 协议 方法 。 
func tableView(  tableView: UITableView, numberOfRowsInSection section: Int) -> Int { 
return commentArray.count 


) 


通过 commentArray 的 count 来 确定 单元 格 数量 。 


步骤 5 在 CommentVC 类 中 添加 tableView( :estimatedHeightForRowAt:) 协 议 方法 。 


func tableView(  tableView: UITableView, estimatedHeightForRowAt indexPath: IndexPath) -> CGFloat { 
return UITableViewAutomaticDimension 


) 


该 方法 会 给 指定 位 置 的 单元 格 预 估 一 个 高 度 。 这 样 的 预 估 值 设置 可 以 改善 表格 视图 在 载 入 数据 时 的 用 户 体验 ， 如 果 表 格 包含 可 变 高 度 的 行 ， 可 能 需要 花费 长 时 间 去 计算 所 有 单元 格 的 高 度 值 ， 这 会 导致 
载 入 时 间 较 长 。 使 用 预 估 值 可 以 推迟 一 些 长 时 间 的 计算 ， 让 表格 先 以 预 估 值 的 高 度 来 计算 滚动 条 的 大 小 和 位 置 。 


步骤 6 在 CommentVC 类 中 添加 tableView( :cellForRowAt:) 协 议 方法 。 


func tableView(  tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { 
let cell = tableView.dequeueReusableCell (withldentifier: "Cell", for: indexPath) as! CommentCell 
cell.usernameBtn.setTitle(usernameArray[indexPath.row], for: .normal) 
cell.usernameBtn.sizeToFit () 
cell.commentLbl.text = commentArray[indexPath.row] 
avaArray[indexPath.row].getDataInBackground { (data:Data?, error:Error?) in 
cell.avalmg.image = UIImage (data: data!) 


) 


return cell 


在 该 方法 中 首先 从 表格 视图 的 可 复 用 队列 中 获取 到 CommentCell 对 象 ， 然 后 设置 单元 格 的 usernameBtn、commentLbl 和 avalmg。 


步骤 7 在 tableView( :cellForRowAt:) 方 法 的 return 语 句 上 面 继续 添加 代码 : 


// 计算 时 间 

let from = dateArray[indexPath.row] 

let now = Date () 

let components : Set«Calendar.Component» = [.second, .minute, .hour, .day, .weekOfMonth] 
let difference - Calendar.current.dateComponents (components, from: from, to: now) 

if difference.second <= 0 { 

cell.datelbl.text = "现在 " 


if difference.second > 0 && difference.minute <= 0 { 
cell.dateLbl.text = "V(difference.second!)4/." 


E. c 


f difference.minute > 0 && difference.hour <= 0 { 
cell.dateLbl.text = "N(difference.minute!)7 i." 


Eds er 


f difference.hour > 0 && difference.day <= 0 1 
cell.dateLbl.text = "\ (difference.hour!) 时 ." 


| 


f difference.day > 0 && difference.weekOfMonth <= 0 { 
cell.dateLbl.text = "N(difference.day!) X." 


if difference.weekOfMonth > 0 ( 
cell.datelbl.text = "\ (difference .weekOfMonth!) Æ." 


这 段 代 码 与 之 前 在 PostVC 类 中 实现 的 代码 雷同 ， 不 多 解释 了 。 


28.3 ”从 云端 载 入 评论 


首先 ， 我们 需要 在 LeanCloud 云 端 创 建 Comments 数 据 表 。 


步骤 1 在 LeanCloud 的 Instagram 控 制 台 中 创建 Class: Comments， 如 图 28-3 所 示 。 
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通过 SDK 或 REST API 中 的 ACL 设置 接 
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图 28-3  f&LeanCloud m 3: 4] ££ Comments A JE 
步骤 2 在 Comments 数 据 表 中 添加 String 类 型 的 username 字 段 ，String 类 型 的 comment 字 段 ，File 类 型 的 ava 字 段 ，String 类 型 的 to。 


步骤 3 在 CommentVC 中 添加 一 个 用 于 分 页 载 入 的 属性 page。 


// page size 
var page: Int = 15 


步骤 4 在 CommentVC 中 创建 一 个 新 的 方法 loadComments()。 


func loadComments() { 

// STEP 1. 合计 出 所 有 的 评论 的 数量 

let countQuery = AVQuery (className: "Comments") 
countQuery?.whereKey("to", equalTo: commentuuid.last!) 


countQuery?. countObjectsInBackground(( (count:Int, error:Error?) in 
if self.page < count { 
self.refresher.addTarget(self, action: t$selector(self.loadMore), for: .valueChanged) 


self.tableView.addSubview (self.refresher) 


该 方法 所 实现 的 第 一 部 分 是 计算 该 帖子 的 评论 数 ， 如 果 数 量 大 于 分 页 数 ， 意 味 着 refresher (刷新 操作 ) 要 起 作用 ， 当 用 户 在 刷新 表格 的 时 候 执 行 loadMore() 方 法 ， 因 为 CommentVC 类 中 的 方法 调用 是 
在 闭 包 中 定义 ， 所 以 需要 使 用 self. 进 行 显 式 调用 。 


步骤 5 在 countObjectslnBackground() 方 法 的 闭 包 中 ， 继 续 添 加 下 面 的 代码 : 


countQuery?.countObjectsInBackground(( (count:Int, error:Error?) in 
if self.page < count { 


// STEP 2. 获取 最 新 的 sSelLf.page 数 量 的 评论 
let query = AVQuery (className: "Comments") 
query?.whereKey("to", equalTo: commentuuid.last!) 
query?.skip = count - self.page 
query?.addAscendingOrder ("createdAt") 
query?.findObjectsInBackground(( (objects:[Any]?, error:Error?) in 
if error == nil { 
/ / T 青空 数组 
self.usernameArray.removeAll (keepingCapacity: false) 
self.commentArray.removeAll(keepingCapacity: false) 
self.avaArray.removeAll(keepingCapacity: false) 
seli .dateArray. removeAll (keepingCapacity: false) 
for object in objects! { 


self.usernameArray.append((object as AnyObject).object(forKey: "username") as! String) 
self.avaArray.append((object as AnyObject).object(forKey: "ava") as! AVFile) 
self.commentArray.append((object as AnyObject).object(forKey: "comment") as! String) 
self.dateArray.append((object as AnyObject).createdAt) 
self.tableView.reloadData () 
self.tableView.scrollToRow(at: IndexPath(row: self.commentArray.count - 1, section: 0) , at: .bottom, animated: false) 
) 
Jelse ( 


print (error?.localizedDescription) 


在 STEP 2. 中 我 们 要 从 LeanCloud 云 端的 Comments 数 据 表 中 获取 评论 数据 记录 ， 第 一 次 获取 的 数量 要 忽略 count-page 的 数量 ， 这 样 会 保证 只 得 到 最 新 的 page 数 量 记录 。 
当 通 过 findObjectslnBackground() 方 法 获取 到 记录 以 后 ， 先 将 数据 存储 到 四 个 独立 的 数组 之 中 ， 然 后 再 刷新 表格 视图 ， 并 且 让 表格 定位 到 最 后 的 单元 格 上 。 


步骤 6 在 CommentVC 类 中 添加 loadMore() 方 法 。 


func loadMore|() 
// STEP 1. Lo bd a 仓 的 数量 
let countQuery = AVQuery (className: "Comments") 
countQuery?.whereKey("to", equalTo: commentuuid.last!) 
countQuery?.countObjectsInBackground(( (count:Int, error:Error?) in 
// 让 refresh 停 止 刷 新 动画 
self.refresher.endRefreshing () 
if self.page >= count ( 
self.refresher.removeFromSuperview() 


} 
}) 


在 该 方法 中 ， 还 是 先 计 算出 当前 帖子 的 评论 总 数 ， 然 后 在 闭 包 中 停止 刷新 动画 ， 如 果 评 论 总 数 小 于 分 页 数 ， 则 意味 着 不 需要 刷新 功能 ， 把 refresh 对 象 从 tableView 中 移 除 。 


步骤 7” 在 self.page>=count 语 句 的 下 面 ， 添 加 一 段 self.page<count 判 读 语 句 。 


// STEP 2. 载 入 更 多 的 评论 
if self.page < count { 
self page = = self.page + 15 
// 从 云端 查询 page 个 记录 
let query = AVQuery(className: "Comments") 
query?.whereKey("to", equalTo: commentuuid.last!) 
query?.skip = count - self.page 
query?.addAscendingOrder ("createdAt") 
query?. findObjects] [InBackground(( (objects:[AnyObject]?, error:Error?) in 
if error == nil ( 
/ / 清空 数组 
self.usernameArray.removeAll(keepingCapacity: false) 
self.commentArray.removeAll(keepingCapacity: false) 
self.avaArray.removeAll(keepingCapacity: false) 
seli .dateArray. removeAll (keepingCapacity: false) 
for object in objects! { 
self.usernameArray.append((object as AnyObject).object(forKey: "username") as! String) 
self.avaArray.append((object as AnyObject).object(forKey: "ava") as! AVFile) 
self.commentArray.append((object as AnyObject).object(forKey: "comment") as! String) 
self.dateArray.append((object as AnyObject).createdAt) 
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} 
self.tableView.reloadData () 
}else ( 
print (error?.localizedDescription) 
} 
}) 
} 


这 段 代 码 与 之 前 的 if 济 断 语句 是 并 列 的 ， 同 时 存在 于 countObjectslinBackground() 闭 包 之 中 。 
当 云 端 评 论 的 记录 数 大 于 page 数 时 ， 则 先 让 page 自 增加 15 条 记录 ， 然 后 从 云端 读 取 这 30 条 记录 ， 并 将 这 些 记录 存储 到 被 清空 的 四 个 数组 之 中 ， 最 后 刷新 表格 视图 。 


步骤 8 在 CommentVC 类 中 的 viewDidLoad0 方 法 中 调用 loadComments( 方 法 。 


override func viewDidLoad() { 
alignment () 
loadComments () 


} 


在 CommentVC 控 制 器 被 初始 化 的 时 人 息 ， 会 调用 loadComments0 方 法 ， 通 过 记录 数量 判断 是 否 需 要 refresher 的 刷新 控件 ， 如 果 记录 总 数 大 于 分 页 数 page 的 时 候 则 refresher 生 效 ， 并且 设置 用 户 在 刷 
新 的 时 候 执 行 loadMore() 方 法 ， 这 样 束 可 以 载 入 更 多 的 评论 数据 了 。 


本 章 小 结 


本 章 我 们 实现 了 Text View 和 Table View 的 委托 协议 方法 ， 从 而 可 以 动态 改变 Text View 的 高 度 值 ， 以 及 修改 与 之 关联 的 Table View 的 高 度 值 。 同 时 在 高 度 值 的 计算 中 还 涉及 了 键盘 的 高 度 ， 所 以 需要 考 


虑 的 情况 会 比较 多 些 。 


第 29 章 ”实现 评论 的 特色 功能 


在 本 章 中 ， 我 们 将 实现 用 户 发 送 评 论 的 功能 ， 以 及 用 户 对 单条 评论 的 删除 、@Address 和 投诉 功能 。 


29.1 ”发送 评论 到 云端 
首先 实现 的 是 将 用 户 提交 的 评论 信息 发 送 到 云端 的 Comments 数 据 表 中 。 
步骤 1 在 故事 板 中 创建 发 送 按钮 与 CommentVC 类 的 Action 关 联 ，Name 设 置 为 sndBtn_clicked。 


// 单 击发 送 按钮 
IBAction func sendBtn clicked( sender: AnyObject) { 


E 


步骤 2 ”在 sendBtn_clicked(_:) 方 法 中 ， 第 一 步 是 添加 一 条 新 的 评论 到 相关 数组 ， 并 且 通 过 表格 视图 的 reloadData() 方 法 刷新 表格 。 


IBAction func sendBtn clicked( sender: AnyObject) { 
// STEP 1. 在 表格 视图 中 添加 一 行 
usernameArray.append (AVUser.current ().username!) 
avaArray.append (AVUser.current().object(forKey: "ava") as! AVFile) 
dateArray.append (Date ()) 
commentArray.append (commentTxt.text.trimmingCharacters (in: CharacterSet.whitespaces 
AndNewlines)) 
tableView.reloadbData () 
} 


在 添加 评论 到 commentArray 数 组 的 时 候 ， 我 们 使 用 了 trimmingCharacters(in:) 方 法 除去 文本 两 端的 空格 和 换行 回 车 。 


步骤 3 在 sendBtn_clicked( :) 方 法 中 继续 添加 代码 : 


// STEP 2. 发 送 评论 到 云端 
let commentObj = AVObject(className: "Comments") 


commentObj?["to"] = commentuuid.last! 

commentObj?["username"] = AVUser.current ().username 

commentObj?["ava"] = AVUser.current().object(forKey: "ava") 

commentObj?["comment"] = commentTxt.text.trimmingCharacters (in: .whitespaces AndNewlines) 


commentObj?.saveEventually() 
// scroll to bottom 
self.tableView.scrollToRow(at: IndexPath(item: commentArray.count - 1, section: 0), at: .bottom, animated: false) 


在 上 面 的 代码 中 创建 了 AVObject 类 型 对 象 commentObj， 在 设置 好 相关 数据 以 后 执行 saveEventually() 方 法 将 数据 提交 到 云端 。 该 方法 是 我 们 第 一 次 使 用 ， 它 也 是 用 来 在 后 台 线 程 中 提交 数据 到 云端 ， 
但 不 见得 是 马上 提交 ， 而 是 由 AVOSCloud SDK 来 决定 在 什么 时 间 提 交 ， 从 而 提高 程序 的 性 能 和 效率 。 


最 后 让 表格 视图 定位 到 最 后 的 一 个 单元 格 的 底部 。 


步骤 4 接着 上 面 的 代码 继续 添加 代码 : 


N 


// STEP 3. € EUI 
commentTxt.text = 
commentTxt.frame.size.height = commentHeight 

commentTxt.frame.origin.y = sendBtn.frame.origin.y 

tableView.frame.size.height = tableViewHeight - keyboard.height - commentTxt.frame.height + commentHeight 


当 用 户 单 击发 送 按钮 并 提交 数据 到 云端 以 后 ， 就 要 初始 化 我 们 的 UI 控件 了 。 其 中 表格 视图 的 高 度 应 该 为 : 表格 视图 的 初始 高 度 -键盘 高 度 (有 可 能 出 现 ) -评论 Text Veiw 的 实际 高 度 (有 可 能 是 多 
行 ) + 评论 Text View 的 初始 高 度 (一 行 的 高 度 值 ) 。 


步骤 5 ”在 故事 板 中 选中 CommentVC 控 制 器 的 表格 视图 ， 在 Attributes Inspector 中 将 Separator 设 置 为 None。 在 大 纲 视 图 中 选中 Cell， 将 Selection 设 置 为 None。 
步骤 6 ”选中 单元 格 中 的 commentLb| 控 件 ， 在 Attributes Inspector 中 确定 Lines 设 置 为 0， 这 样 才能 够 在 Label 中 显示 多 行文 本 内 容 。 


构建 并 运行 项 目 ， 为 帖子 照片 添加 评论 ， 效 果 如 图 29-1 所 示 。 


LE*F7:35 


评论 
liluming 45 分 ， 
”在 台湾 的 九 份 ， 不 错 的 地 方 ! 
liuming 4135. 
OK 
rs liuming 254. 
”仍然 是 那么 的 有 味道 ! 
e, luming 245]. 
” 九 份 的 山 间 小 道 
九 份 的 小 号 作坊 
JV BASH 


希望 下 次 的 旅行 还 是 如 此 开心 ! G 


如 果 你 愿意 的 话 ， 可 以 在 一 个 帖子 评论 中 连续 添加 20 条 左右 的 记录 ， 然 后 重新 进入 到 该 帖子 的 评论 页 面 ， 就 可 以 通过 下 拉 刷 新 的 方式 查看 之 前 的 评论 。 


在 LeanCloud 云 端的 控制 台中 ， 查 看 Comments 数 据 表 ， 可 以 浏览 用 户 所 添加 的 评论 记录 ， 如 图 29-2 所 示 。 


(^j |objectld STRING ~| comment STRING | ~l, 
O 57a51d076be3ff00652bc7ee liuming 九 份 的 山 间 小 道 九 份 的 小 吃 作坊 。 ava. jpg (Ef&)|X€] tiuming 9C951D08-7A0F-4FA. 
O 57a51cc779bc440054be0c8b X liuming 仍然 是 那么 的 有 味道 ! ava. jpg [上 传 ] x | liuming 9C951D0B-7A0F-4FA. 
O 57a5187e5bbb5000641154b7 liuming OK ava. jpg [.Ef&]|X | liuming 9C951D08-7A0F-4FA.. 
O 57a51808165abd00614c54f2 liuming 在 台湾 的 九 份 ， 不 错 的 地 方 ! ava. jpg [Efé)|X| liuming 9C95100B-7A0F-4FA.. 
O 57a517a5d342430057570035  liuming 真 的 很 不 错 哟 ! ava. jpg [£ 传 ][*| liuming 3CEEE186-9EE0—482.. 
O 57a5171a165abd060614c5141 liuming Ex ssi] E ava. jpg (Ef) X | liuming 3CEEE186-9EE0—-482.. 


图 29-2 ”在 LeanCloud 云 端 查看 Comments 数 据 表 的 记录 


29.2 与 用 户 名 的 交互 


当 用 户 在 评论 页 面 中 单 击 评论 者 名 称 的 时 候 ， 需 要 实现 一 些 功能 


步骤 1 在 评论 控制 器 视图 中 的 usernameBtn 控 件 与 CommentVC 类 建立 Action 关 联 ，Name 设 置 为 : usernameBtn_clicked。 


IBAction func usernameBtn clicked( sender: AnyObject) { 


步骤 2 在 tableView( :cellForRowAt:) 方 法 的 最 后 ， 为 usernameBtn 添 加 一 个 属性 变量 。 


func tableView(  tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { 


cell.usernameBtn.layer.setValue(indexPath, forKey: "index") 
return cell 


} 


步骤 3 在 usernameBtn_clicked(_:) 方 法 中 ， 添 加 下 面 的 代码 : 


QIBAction func usernameBtn clicked( sender: AnyObject) ( 


Ly 按钮 的 index 


et i = sender.layer.value(forKey: "index") as! IndexPath 
// 通过 工 获取 到 用 卢 所 单 击 的 单元 格 
let cell = tableView.cellForRow(at: i) as! CommentCell 
// 如 果 当 前 用 户 单 击 的 是 自己 的 username， 则 调用 HomeVC， 和 否则 是 GuestVC 
if cell.usernameBtn.titleLabel?.text == AVUser.current().username { 
let home = self.storyboard?.instantiateViewController (withIdentifier: "HomeVC") as! HomeVC 
self.navigationController?.pushViewController (home, animated: true) 
Jelse 
let query = AVUser. query () 


query? .whereKey ("username", equalTo: cell.usernameBtn.titleLabel?.text) 

query?.findObjectsInBackground(( (objects: [Any]?, error:Error?) in 

if let object = objects?.last ( 
questArray. append (object as! AVUser) 
let guest = self.storyboard?.instantiateViewController (withldentifier: "GuestVC") as! GuestVC 
self.navigationController?.pushViewController (guest, animated: true) 


与 之 前 PostVC 类 中 的 用 户 名 单 击 操作 类 似 ， 根 据 是 否 为 当前 用 户 来 呈现 不 同 的 控制 器 。 如 果 所 单 击 的 用 户 不 是 当前 用 户 ， 则 需要 通过 AVQuery 类 获取 AVUser 类 型 的 对 象 ， 并 将 其 赋值 到 guestArray 全 
局 数组 之 中 ， 然 后 再 推出 GuestVC 控 制 器 。 


构建 并 运行 项 目 ， 分 别 单 击 自己 评论 的 用 户 名 和 访客 用 户 名 ， 效 果 如 图 29-3 所 示 。 


上 午 8:34 
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编辑 个 人 主页 E. 
刘 铭 刘 怀 羽 
www.liuming.cn 刘 怀 羽 .中 国 

iDS 开 发 程序 员 ，php 程 序 员 。 我 和 你 一 样 


图 29-3 ”从 评论 页 面 进 入 到 个 人 和 访客 主页 


29.3 删除 评论 


当前 用 户 可 以 管理 属于 自己 的 帖子 的 评论 ， 具 体 来 说 就 是 可 以 删除 别人 给 自己 的 帖子 发 的 评论 。 实 现 的 方式 是 : 用 户 在 评论 内 容 的 单元 格 上 面向 左 划 动 手指 ， 此 时 会 呈现 出 相关 菜单 ， 从 菜单 中 选择 删 
除 操作 。 


步骤 1 在 CommentVC 类 中 添加 属于 UITableViewDataSource 的 协议 方法 tableView( :canEditRowAt:), 


// 设置 所 有 单元 格 可 编辑 
func tableView(  tableView: UlITableView, canEditRowAt indexPath: IndexPath) -> Bool { 


return true 


) 


该 方法 会 询问 数据 源 (CommentVC) 对 象 ， 对 于 indexPath 所 指定 的 行 是 否 可 编辑 。 通 过 该 协议 方法 可 以 单独 设置 表格 视图 的 某 个 单元 格 是 否 可 编辑 。 对 于 可 编辑 的 单元 格 可 以 显示 出 一 个 插入 或 删 
除 的 控制 选项 ， 如 果 我 们 不 实现 这 个 方法 ， 所 有 的 单元 格 都 是 可 编辑 的 。 不 可 编辑 的 行 会 忽略 掉 UITableViewCell 类 的 editingstyle 属 性 ， 以 及 不 会 出 现 插 入 、 删 除 的 选项 。 对 于 可 编辑 的 行 ， 如 果 不 想 让 它 
出 现 揪 入、 删除 选项 ， 则 可 以 通过 tableView( :editingStyleForRowAt:) 委 托 方法 将 返回 值 设 置 为 None。 


步骤 2 添加 tableView( :editActionsForRowAt:) 方 法 。 


func tableView(  tableView: UITableView, editActionsForRowAt indexPath: IndexPath) -> [UITableViewRowAction]? { 
// 获取 用 户 所 划 动 的 单元 格 对 象 

let cell = tableView.cellForRow(at: indexPath) as! CommentCell 

// Action 1. Delete 

let delete = UITableViewRowAction(style: .normal, title: "1"){ (UITableViewRow Action, IndexPath) -> Void in 

// STEP 1. 从 云端 删除 评论 

let commentQuery = AVQuery (className: "Comments") 

commentQuery?.whereKey("to", equalTo: commentuuid.last!) 

commentQuery?.whereKey ("comment", equalTo: cell.commentLbl.text!) 

commentQuery?.findObjectsInBackground(( (objects:[Any]?, error:Error?) in 

if error == nil { 
// 找到 相关 记录 

for object in objects! { 

(object as AnyObject).deleteEventually () 


} 
}else { 
print (error?.localizedDescription) 
} 
}) 


// STEP 2. 


从 表格 视图 删 


余 单 元 格 


self.commentArray. ios indexPath.row) 
self.dateArray.remove (at: indexPath.row) 
self.avaArray.remove (at: indexPath.row) 
self.usernameArray.remove (at: indexPath.row) 
self.tableView.deleteRows (at: [indexPath], with: .fade) 
// 关闭 单元 格 的 编辑 状态 

self.tableView.setEditing(false, animated: true) 


在 该 方法 中 ， 我 们 首先 获取 到 用 户 划 动 的 单元 格 对 象 ， 然 后 进入 至 
UlTableViewRowAction 对 象 定 义 了 一 个 动作 (Action) 
个 或 多 个 自己 的 动作 。 在 创建 UITableViewRowAction 对 象 的 时 候 style 参 数 设置 为 .normal, 


当 用 户 单 击 该 动作 以 后 


会 执 和 


lAction 1 的 代码 部 分 


jJ 闭 包 中 的 代码 (STEP 1. 部 分 ) , 


评论 的 信息 从 数组 中 移 除 ， 并 从 表格 视图 中 移 除 显示 该 条 评论 的 单元 格 。 


29.44 ” @Address 操 作 


这 部 分 我 们 将 实现 评论 的 @Address 操 作 。 


在 之 前 Action 1. 代 码 的 后 面 


// Act 

let address - UI 
// 在 Text View 中 包含 Address 

lf.commentTxt.text = "\ (self 


ion 2. Address 


// 让 发 送 掖 钮 生效 


.SendBtn.isF 


// 关闭 单元 格 的 编辑 状态 


lf.tableView.setEditing (f 


Action 2. 的 代码 还 是 先 定义 一 个 UITableViewRowAction 对 象 ， 
中 添加 了 文字 内 容 ， 所 以 让 sendBtn 和 生效， 并 且 让 单元 格 退 


TableViewRowAction (style: 


面 ， 继 续 添加 下 面 的 代码 : 


title: 


.normal, "2") ((action:UITableView 


.commentTxt.text + "Q" + self. 


Enabled = true 


alse, animated: true) 


29.5 ”投诉 评论 


外 


民 出 编辑 状态 ， 动 作 选 项 消失 。 


我 们 要 实现 的 最 后 一 个 动作 是 投诉 评论 。 


步骤 1 


在 之 前 Action 2. 代 码 的 后 面 


// Action 3. 投诉 评论 


， 继 续 添加 下 面 的 代码 : 


let complain = UITableViewRowAction (style: .normal, title: 
// 发 送 投诉 到 云端 
let complainObj = AVObject(className: "Complain") 
complainObj?["by"] = AVUser.current ().username 
complainObj?["post"] = commentuuid.last 
complainObj?["to"] = cell.commentlbl.text 
complainObj?["owner"] = cell.usernameBtn.titleLabel?.text 
complainObj?. savelnBackground(( (success:Bool, error:Error?) in 
if success ( 
print (" 投 诉 已 经 处 理 了 ! ") 
Jelse( 
print (error?.localizedDescription) 


} 


)) 
// 关闭 单元 格 的 编辑 状态 


self 


.tableView.setE 


diting (f 


alse, animated: true) 


usernameArray[index Path.row] 


RowAction, indexPath: 


十 ud ud ) ud 


"3")[(action: UITableViewRowAction, indexPath: 


. f£Action 1 中 我 们 创建 了 第 一 个 Action 一 一 delete。 
， 当 用 户 在 单元 格 中 横向 滑动 手指 的 时 候 会 被 呈现 出 来 。 对 于 可 编辑 的 表格 ， 
它 代 表 该 操作 是 一 个 非 破坏 性 的 动作 。 除 此 以 外 ， 


IndexPath) 


当 用 户 单 击 该 操作 以 后 会 在 commentTxt 里 面 追加 一 个 @ 符 号 ，@ 符 


IndexPath) 


-» Void in 


-» Void in 


号 的 后 面 则 是 该 单元 格 发 表 评 论 的 用 户 名 称 。 


是 UITableViewRowAction 类 型 的 对 象 。 
在 横向 划 动 单元 格 后 默认 会 呈现 删除 按钮 ， 这 个 类 可 以 让 我 们 定义 一 


还 有 一 个 default 风 格 的 动作 ， 它 代表 一 个 破坏 性 的 动作 。 


在 这 段 代 码 中 首先 从 云端 的 Comments 数 据 表 中 找到 该 条 评论 记录 ， 然 后 将 其 从 数据 表 中 删除 。 之 后 会 执行 STEP 2. 部 分 的 代码 ， 将 该 条 


因为 向 commentTxt 


在 Action 3. 部 分 中 ， 我 们 会 将 被 投诉 的 评论 信息 保存 到 云端 的 Complain 数 据 表 中 ，by 字 段 是 提交 投诉 的 用 户 名 称 ，post 字 段 是 评论 的 uuid，to 字 段 是 评论 内 容 ，owner 字 段 是 该 条 评论 的 发 布 者 名 


步骤 2 ” 接 下 来 需要 为 3 个 Action 设 置 不 同 的 背 和 


func t 


ableView( | 


tableView: UlTableView, 


景色 。 


editActionsForRowAt indexPath: IndexPath) -> 


// 按钮 的 背景 颜色 


delete.backgrounaColor = 
address.backgroundColor - 
complain.backgroundColor - 


.red 
.gray 
.gray 


这 里 设置 删除 Action 的 背景 色 为 红色 ， 另 外 2 个 则 是 灰色 。 


步骤 3 ” 接 下 来 需要 根据 不 同 的 情况 生成 不 同 的 Action 组 。 


if cel 


l.usernameBtn.title] 


abel?.text == AVUser.current () 


.username { 


recu 


rn [delete, address] 


if commentowner.last 


Jelse 


turn [delete, address, 


{ 


== AVUser.current () 
complain] 


.username { 


return [address, complain] 


如 果 该 条 评论 就 是 当前 用 户 发 布 的 ， 则 只 显示 删除 和 address 动 作 ， 
则 只 显示 address 和 投诉 动作 。 


- 


在 if 语句 中 的 commentowner 是 之 前 在 PostVC 类 中 操作 过 的 数据 ， 因 为 CommentVC 视 图 都 是 通过 PostVC 控 制 器 推送 出 来 的 ， 除 此 以 外 没有 其 他 “ 通 
方法 中 ， 只 要 用 户 单 击 commentBtn 按 钮 后 


就 会 将 该 帖子 的 发 布 者 添加 到 commentowner 数 组 之 中 。 


[UI 


TableViewRowAction]? { 


毕竟 自己 投诉 自己 发 的 评论 不 现实 。 如 果 当 前 用 户 是 该 条 评论 的 帖子 的 所 有 者 ， 则 可 以 删除 、address 和 投诉 。 除 上 述 两 种 情况 以 


。 在 PostVC 类 的 commentBtn clicked( :) 


ae 从 按钮 后 执行 的 代码 

IBAction func commentBtn clicked( sender: AnyObject) { 

let i = sender.layer.value(forKey: "index") as! IndexPath 

let cell = tableView. cel lForRow(at: i) as! PostCell 

// 发 送 相关 数据 到 全 局 变 

commentuuid. ce 

commentowner.append(cell.usernameBtn.titleLabel!.text!) 
/ 需要 在 故事 板 中 查看 Storyboard ID 是 否 设置 

let comment = self.storyboard?.instantiateViewController (withIdentifier: "CommentVC") as! CommentVC 
self.navigationController?.pushViewController (comment, animated: true) 


构建 并 运行 项 目 ， 在 评论 单元 格 上 滑动 手指 ， 会 出 现 动作 选项 ， 如 图 29-4 所 示 。 


下 午 10:02 
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很 不 错 哟 |! 
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图 29-4 滑动 手指 后 出 现 的 交互 按钮 
上 图 中 第 一 种 情况 是 评论 发 布 者 不 是 当前 用 户 本 人 ， 但 评论 的 帖子 是 当前 用 户 发 布 的 。 第 二 种 情况 是 评论 发 布 者 就 是 当前 用 户 本 人 。 
当 单 击 Action 1. 动 作 以 后 ， 该 条 评论 会 被 删除 。 


当 单 击 Action 2. 动 作 以 后 ， 在 commentTxt 中 会 出 现 @+ 评 论 发 布 者 的 文字 ， 如 图 29-5 所 示 。 


图 29-5 Xd (ae 


当 单 击 Action 3. 动 作 以 后 ， 在 调试 控制 台中 可 以 看 到 投诉 是 否 成 功 ， 访 问 LeanCloud 云 端的 Complain 数 据 表 ， 可 以 看 到 所 提交 的 投诉 数据 ， 如 图 29-6 所 示 。 


CACEN 


post STRING "|by STRING “| owner STRING "o STRING - 


liuming 227337FF-2116-4BQ.. lele liuming 13. 


图 29-6 ”云端 Complain 数 据 表 中 的 投诉 记录 
接 下 来 ， 我 们 为 投诉 动作 添加 一 个 警告 对 话 框 ， 使 其 有 更 好 的 用 户 体验 。 


步骤 1 在 CommentVC 类 中 添加 新 的 方法 alert(error:message:)。 


// 消息 警告 

func alert(error: String, message: String) ( 

let alert = UlAlertController(title: error, message: message, preferredStyle: .alert) 
let ok = UIAlertAction (title: "OK", style: .cancel, handler: nil) 
alert.addAction (ok) 

self.present(alert, animated: true, completion: nil) 


) 


该 方法 在 EditVC 中 有 定义 ， 可 以 直接 复制 。 


步骤 2 修改 tableView( :editActionsForRowAt:) 方 法 中 投诉 部 分 的 代码 : 


complainObj?.savelnBackground(( (success:Bool, error:Error?) in 
if success ( 


self.alert(error: "投诉 信息 已 经 被 成 功 提交 ! ", message: "感谢 您 的 支持 ， 我 们 将 关注 您 提交 的 投诉 ! ") 
Jelse( 
self.alert (error: "$k", message: error!.localizedDescription) 


构建 并 运行 项 目 ， 再 次 尝试 投诉 功能 ， 效 果 如 图 29-7 所 示 。 


投诉 信息 已 经 被 成 功 提交 ! 


感谢 您 的 支持 ， 


OK 


图 29-7 单 击 投诉 后 弹出 的 警告 对 话 框 


29.6 为 三 个 Action 添 加 背景 图 


现在 的 三 个 动作 只 是 通过 文字 Title 让 用 户 进行 选择 ， 接 下 来 我 们 要 为 这 些 Action 添 加 形象 的 背景 图 。 
步骤 1 从 资源 文件 夹 中 拖 岛 delete.png、complain.png 和 address.png 三 个 图 片 文件 到 项 目 之 中 ， 注 意 一 定 要 勾 选 Copy items if needed 和 Add targets: Instagram, 


步骤 2 在 CommentVC 类 中 将 delete 动 作 的 背景 色 设 置 代 码 修改 为 下 面 这 样 : 


delete.backgroundaColor = UIColor (patternImage: Ullmage (named: "delete.png")!) 


这 里 ， 我 们 使 用 图 片 来 创建 颜色 ， 因 为 UllImage(named:) 方 法 会 返回 一 个 可 选 的 Ullmage 对 象 ， 所 以 要 使 用 ! 对 其 强制 拆 包 。 


步骤 3 ”删除 delete 动 作 声明 时 的 Title 文 字 。 


let delete = UITableViewRowAction (style: .normal, title: " ") ( 


[s 


ITableViewRowAction, IndexPath) -> Void 


步骤 4 在 CommentVC 类 中 将 address 和 complain 动 作 的 背景 色 设 置 代码 修改 为 下 面 这 样 : 


address.backgroundColor = UlColor(patternlImage: UIImage (named: "address.png")!) 
complain.backgroundColor = UlColor(patternlImage: UIImage (named: "complain.png")!) 


步骤 5 _ 同样， 删除 address 和 complain 动 作 声 明 时 的 Title 文 字 。 


构建 并 运行 项 目 ， 效 果 如 图 29-8 所 示 。 


liuming 


真 的 吗 ? 


liuming 


图 29-8 为 三 个 Action 添 加 图 片 后 的 效果 


本 章 小 结 


本 章 内 容 较 多 ， 除 了 涵盖 发 送信 息 到 云端 数据 表 和 与 UlI 控 件 交 互 以 外 ， 最 大 的 一 个 挑战 就 是 利用 UITableViewDelegate 协 议 方法 实现 单元 格 的 可 编辑 交互 。 利 用 tableView(_:editActionsForRowAt:) 方 
法 ， 我 们 实现 了 三 种 不 同 的 动作 ， 而 且 这 三 种 动作 又 与 是 否 为 当前 用 户 有 关 ， 注 意 它 们 之 间 的 逻辑 关系 。 


另外 ， 本 章 所 提供 的 所 有 按钮 Icon 图 标 都 可 以 通过 Sketch 软件 手工 绘制 ， 请 扫 拉 下面 的 二 维 码 观看 制作 Icon 图 标的 视频 教程 。 


Address 图 标的 制作 


在 Instagram 项 目的 评论 页 面 中 ， 还 需要 支持 # (Hashtag) 和 @ (Mention) 功能 。 如 果 你 使 用 过 微 博 ， 可 能 对 这 两 个 功能 并 不 陌生 ， 如 图 30-1 所 示 。 


选择 昵称 或 轻 鼓 空格 完成 输入 

pu 洪荒 之 力 

雷锋 网 | (EHI 
mess 我 已 经 用 尽 洪 英之 力 了 


孙红雷 ad 我 已 经 用 了 洪荒 之 力 
微 博 雷达 HARALA 


图 30-1 新 浪 微 博 中 的 Mention 和 Hashtag 
简单 地 说 ，Hashtag 就 是 一 串 以 # 开 头 的 关键 字 标记 。 
我 们 可 以 利用 Hashtag 实 现 标记 事件 功能 ， 它 可 以 建立 与 拥有 相同 标记 的 其 他 人 之 间 的 连接 ， 让 大 家 很 快 就 找到 相关 主题 ， 因 此 我 们 可 以 把 Hashtag 翻 译 成 「 主 题 标签 」 。 
在 创建 Hashtag 的 时 候 ， 我 们 需要 使 用 # 符 号 开头 ， 后 边 紧 接着 标签 的 文字 ， 最 后 加 一 个 空格 来 结束 标记 。 


Mention 则 用 于 标记 人 名 ， 与 Hashtag 类 似 。 它 的 目的 是 产生 一 个 可 以 接连 到 人 名 ， 让 别人 可 以 很 快 找到 你 所 指 的 人 。 


30.1 实现 Hashtag 和 Mention 的 识别 功能 


在 项 目 中 一 共有 两 个 地 方 需要 自动 识别 Hashtag 和 Mention ， 一 个 是 评论 页 面 各 个 单元 格 (CommentCell 类 ) 中 的 commentLbl， 另 一 个 则 是 帖子 发 布 页 面 单元 格 (PostCell 类 ) 中 的 titleLbl。 
为 了 可 以 快速 实现 上 面 提 到 的 这 两 个 功能 ， 我 们 需要 从 GitHub 中 下 载 KILabel 并 下 载 它 ， 如 图 30-2 所 示 。 


从 介绍 我 们 了 解 到 ，KILabel 可 以 高 亮 显示 URL、 用 户 名 和 hashtags， 并 且 能 够 实现 单 击 交互 功能 。 


| 
F 
F | | 
| L] 
| 


A simple to use drop in replacement for UlLabel for iOS 7 and above that highlights links such as URLs, twitter style 
isernames and hashtags and makes them touchable. 


bel. Tap or 


KJ30-2. GitHub 中 的 KILabel 第 三 方 库 


步骤 1 从 GitHub 中 下 载 KILabel， 解 压缩 以 后 将 项 目 中 Source 文 件 夹 中 的 KlLabel.h 和 KIlLabel.m 两 个 文件 直接 拖 忠 到 项 目 之 中 ， 勾 选 Copy items if needed 和 Add to targets: Instagram。 如 果 载 入 
无 法 实现 则 可 以 从 资源 文件 夹 中 找到 KlLabel.h 和 KlLabel.m 这 两 个 文件 。 


步骤 2 在 单 击 Finish 按 钮 以 后 ，Xcode 会 弹出 配置 Objective-C 桥 接头 文件 的 对 话 框 ， 如 图 30-3 所 示 。 选 择 Create Bridging Header, 


Would you like to configure an Objective-C bridging header? 


Adding these files to Instagram will create a mixed Swift and Objective-C target. 
Would you like Xcode to automatically configure a bridging header to enable 
classes to be accessed by both languages? 


Cancel Don't Create | Create Bridging Header 


Add to targets: EJ ,À. Instagram 


图 30-3 Xcode 自动 为 Objective-C 类 配置 bridging header X4} 


此 时 在 Instagram 项 目 中 会 自动 创建 一 个 Instagram-Bridging-Header.h 文 件 ， 如 图 30-4 所 示 。 


| » CommentVC.swi 


E EEM —us | 


= CommentCell.swift 


pz wu m o 


Instagram-Bridgaing-Header.h 
> — Products 


图 30-4 Æ X f) Instagram-Bridging-Header.h X4} 


从 Xcode 6 开始 ， 芋 果 引 入 了 自家 的 Swift 语言 来 鼓励 更 多 的 程序 员 通 过 它 来 开发 IOS 应 用 程序 。 在 此 之 前 ， 开 发 者 一 直 使 用 的 是 Objective-C 来 进行 ODS 和 Mac OS X 平 台 的 应 用 程序 开发 。Swift 语 言 速 
度 更 快 、 更 加 安全 和 更 加 现代 ， 经 过 几 年 来 的 不 断 改 进 ，Swift 也 确实 不 辱 使 命 ， 越 来 越 多 的 开发 者 从 Objective-C 转 到 了 Swift。 


但 问题 是 Objective-C 作 为 苹果 的 主要 开发 语言 存在 了 很 多 年 ， 目 前 尚 无 成 熟 的 Swift 库 可 用 ， 所 以 在 编写 应 用 程序 的 时 候 ， 基 本 离 不 开 调 用 Objective-C 代 码 的 情况 。 


如 何在 Swift 环境 下 去 调用 Objective-C 代 码 呢 ? 苹果 给 出 的 解决 方案 是 使 用 一 个 Bridging-Header 头 文件 ， 在 Swift 项 目 中 ， 将 所 要 使 用 的 Objective-C 代 码 的 头 文件 引用 进来 。 其 中 Xcode 自 动 生成 的 
头 文 件 名 形式 会 是 项 目 名 -Bridging-Header.h 这 样 的 形式 。 这 样 ， 我 们 就 可 以 使 用 相应 的 头 文件 来 引用 Object-C 的 代码 了 。 


步骤 3 在 Instagram-Bridging-Headerh 文 件 中 添加 一 行 代 码 ， 用 于 导入 KILabel 类 的 头 文件 。 


fimport "KILabel.h" 


桥接 头 文件 的 作用 就 是 告诉 项 目 ， 我 们 将 会 在 Swift 项 目 中 使 用 哪些 Objective-C 语 言 的 类 文件 。 在 编写 程序 代码 的 时 候 ， 我 们 就 可 以 使 用 Swift 语法 格式 来 调用 和 访问 Objective-C 类 的 方法 和 属性 了 。 


步骤 4 ”在 故事 板 中 选中 CommentCell 中 的 CommentLbl| 控 件 ， 在 ldentity Inspector 中 将 Class 设 置 为 KILabel， 如 图 30-5 所 示 。 
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图 30-5 ”设置 CommentLbl 控 件 的 类 为 KILabel 


步骤 5 接着 选中 PostCell 中 的 TitleLbl 控 件 ， 在 ldentity Inspector 中 将 Class 设 置 为 KILabel， 如 图 30-6 所 示 。 
Custom Class 


Class 


Module | None ~ 


Designables Up to date 


Identity 


Restoration ID | | 


User Defined Runtime Attributes 


Value 


图 30-6 


设置 titleLbl 控 件 的 类 为 KILabel 


步 又 6 在 CommentCel| 类 中 将 commentLb| 的 类 型 修改 为 KILabel。 在 PostCell 类 中 将 titleLbl| 的 类 型 修改 为 KILabel。 


class CommentCell: 


UITableViewCell { 


class PostCell: U 


: KILabel! 


ITableViewCell { 


QIBOutlet weak var titleLbl: 


KILabel! 


现在 ， 有 2 个 地 方 Labe| 控 件 已 经 继承 于 KILabel 类 了 ， 接 下 来 我 们 需要 为 KILabel 类 指定 识别 格式 。 


步骤 7 在 项 目 导航 中 打开 KlLabel.m 文 件 ， 找 到 -getRangesForHashtags:， 将 下 面 的 代码 : 


dispatch once(&onceToken, ^{ 


NSError *error = 


nil; 


); 


regex = [[NSRegularl 


dispatch once(&onceToken, ^{ 


NSError *error = 


nil; 


); 


regex = [[NSRegularl 


Expression alloc] initWithPattern:Q" (&[^fNNs]4)" options:0 error:&error]; 


Expression alloc] initWithPattern:Q" (?«!NNw) £ ([NNWNN. 14) ?" options:0 error:&error]; 


根据 我 们 的 实际 需求 ， 通 过 正则 表达 式 识别 Label 中 以 # 开 头 后 面 接着 非 # 和 非 空 格 的 字符 串 ， 从 而 实现 对 Hashtag 标 记 的 识别 。 


步骤 8 


j: 


继续 修改 下 面 的 代码 : 


(text.length > 4) ( 


// Run the expression and get matches 
= [regex matchesInString:text options:0 range:NSMakeRange (0, text.length)]; 


NSArray *matches 


// Add all our ranges to the result 
for (NSTextCheckingResult *match in matches) 


{ 


NSRange matchRange = [match range]; 


NSString *matchString = | 
if (![self ignoreMatch:matchString]) 


if 
{ 


[rangesForHashtags addObject:Q@{KILabelLinkTypeKey : 
matchString, 


ILabelLinkKey : 
) 
J 
} 


FT 


@ (Kl 


[LinkTypeHashtag), KI 


text substringWithRange:matchRange]; 


与 原始 代码 不 同 的 是 ， 只 有 在 传递 进来 的 text 长 度 大 于 4 的 时 候 才 会 进行 识别 匹配 。 


步骤 9 ”还 是 在 KlLabel.m 文 件 中 ， 找 到 -getRangesForUserHandles:， 将 下 面 的 代码 : 


dispatch once (&onceToken, 


NSError *error - 


T 


nil; 


); 


regex = [[NSRegularl 


dispatch once(&onceToken, ^{ 


NSError *error - 


nil; 


initWithPattern:Q"([Nu4e00-Nu91 


); 


regex = [[NSRegularExpression alloc] 


[Label RangeKey : 


对 于 人 名 的 识别 ， 我 们 允许 包含 中 文 和 其 他 的 字符 以 及 下 划 线 和 减 号 ， 人 名 长 度 限 制 在 2 至 30 个 字符 之 间 。 


步骤 10 ”继续 在 -getRangesForUserHandles: 方 法 中 ， 将 下 面 的 代码 : 


// Run the expression and get matches 
[regex matchesInString:text options:0 range:NSMakeRange (0, text.length)]; 


NSArray *matches - 


// Add all our ranges to the result 
for (NSTextCheckingResult *match in matches) 


{ 


NSRange matchRange = 


[match range]; 


NSString *matchString = | 


text substringWithRange:matchRange]; 


if (![self ignoreMatch:matchString]) 
{ 
[rangesForUserHandles addObject:8[KILabelLinkTypeKey : Q@ (KILinkTypeUserHandle),KILabelRangeKey : 
} 
} 
修改 为 : 
// Run the expression and get matches 
NSArray *matches = [[NSArray alloc] init]; 
if ((matches = [regex matchesInString:text options:0 range:NSMakeRange (0, text.length)]) && 


NSArray *matches 


{ 


NSRange matchRange = 


to the result 


[match range]; 


NSString *matchString = | 
if (![self ignoreMatch:matchString]) 
{ 


text substringWithl 


= [regex matchesInString:text options:0 range:NSMakeRange (0, text 
// Add all our ranges 
for (NSTextCheckingResult *match in matches) 


[rangesForUserHandles addObject:Q (Kl 


} 
) 
} 


[LabelLinkTypeKey : 


@ (KI 


Range:matchRange]; 


[LinkTypeUserHandle), K] 


与 原始 代码 不 同 的 是 ， 只 有 在 text 的 长 度 大 于 4， 并 且 有 [匹配 内 容 的 时 候 才 会 执行 if 语 句 中 的 内 容 。 


[LabelRangeKey : 


[NSValue valueWithRange:matchRange], 


Expression alloc] initWithPattern:Q" (?«!VNw) G ([NNWNN. 14) ?" options:0 error:&error]; 


Faba-zA-20-9 -](2,30]" options:0 error:&error]; 


[NSValue valueWithRange:matchRange],KILabelLinkKey 


(text.length » 4)) ( 
t.length)]; 


[NSValue valueWithRange:matchRange], KI 


[LabelLinkKey : 


: matchString)]; 


matchString )]; 


构建 并 运行 项 目 ， 在 CommentVC 和 PostVC 中 发 布 带 有 # 和 @ 的 评论 和 帖子 ， 效 果 如 图 30-7 所 示 。 
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图 30-7 评论 和 帖子 页 面 的 hashtag 和 mention 标 签 


30.2 ”实现 Mention 的 交互 


当 用 户 在 评论 或 帖子 中 看 到 Hashtag 或 Mention 以 后 ， 还 可 以 单 击 浏览 相关 信息 ， 这 部 分 我 们 将 实现 与 Label 的 交互 操作 .。 


步骤 在 CommentVC 类 中 的 tableView( :cellForRowAt:) 方 法 中 ， 在 cell.usernameBtn.layer.setValue(indexPath,forKey:“index”) 代 码 的 上 方 添加 下 面 的 代码 : 


// Rmentions is tapped 

cell.commentLbl.userHandleLinkTapHandler = ( label, handle, rang in 
var mention = handle 

mention = String (mention.characters.dropFirst ()) 

if mention.lowercased() == AVUser.current().username { 

let home = self.storyboard?.instantiateViewController (withIdentifier: "HomeVC") as! HomeVC 

self.navigationController?.pushViewController (home, animated: true) 

}else { 

let query = AVUser. query () 

query? .whereKey ("username", equalTo: mention. lowercased () ) 

query?. findObjectsInBackground(( (objects:[Any]?, error:Error?) in 

if let object = objects?.last ( 
questArray. append (object as! AVUser) 
let guest = self.storyboard?.instantiateViewController (withldentifier: "GuestVC") 
self.navigationController?.pushViewController (guest, animated: true) 


as! GuestVC 


在 上 面 的 这 段 代码 中 ， 我 们 定义 了 一 个 闭 包 ， 或 者 说 是 一 个 代码 块 。 当 用 户 在 commentLbl 中 单 击 某 个 @ 连 接 以 后 会 执行 闭 包 中 的 代码 。 当 闭 包 执行 的 时 候 会 传递 进来 三 个 参数 : label 代 表 用 户 所 单 击 


的 那个 Label 对 象 ，handle 是 用 户 所 单 击 的 @mention，range 则 是 handle 在 label 中 的 位 置 范围 。 


在 闭 包 中 ， 我 们 首先 将 handle 的 首 字 符 去 掉 (@ 符 号 ) ， 然 后 判断 截取 后 的 用 户 名 是 否 为 当前 登录 的 用 户 。 如 果 是 ， 则 通过 导航 控制 器 推出 HomeVC 控 制 器 。 如 果 不 是 ， 则 需要 从 LeanCloud 云 端 获取 


到 AVUser 类 型 的 对 象 ， 并 且 将 该 对 象 添加 到 guestArray 数 组 之 中 ， 只 有 这 样 在 推出 GuestVC 控 制 器 的 时 候 ，GuestVC 控 制 器 才能 显示 正确 的 访客 信息 。 


在 获取 AVUser 对 象 的 时 候 ， 我 们 借助 了 AVUser 类 的 query() 方 法 ， 它 会 生成 只 针对 _User 数 据 表 的 查询 对 象 。 


构建 并 运行 项 目 ， 可 以 先 发 布 两 个 包含 Mention 的 评论 ， 然 后 单 击 进行 测试 ， 如 图 30-8 所 示 。 当 单 击 访客 名 称 后 会 进入 到 GuestVC 控 制 器 ， 当 单 击 当前 用 户 名 称 后 会 进入 到 HomeVC 控 制 器 。 
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图 30-8 ” 单 击 mention 后 跳 转 到 HomeVC 和 GuestVC 的 效果 


303 ”将 Hashtag 发 送 到 云端 


当 用 户 在 评论 页 面 中 发 送 带 有 Hashtag 的 评论 信息 时 ， 需 要 我 们 在 LeanCloud 云 端 进行 记录 ， 便 于 以 后 可 以 检索 出 相关 信息 、。 


步骤 1 在 CommentVC 类 的 sendBtn_clicked( :) 方 法 中 ， 在 发 送 评 论 对 象 ommentObj 到 LeanCloud 云 端 数据 表 以 后 ， 添 加 下 面 的 代码 : 


// STEP 3. 发 送 hashtag 到 云端 
let words: [String] = commentTxt.text.components (separatedBy: CharacterSet.whitespacesAndNewlines) 
for var word in words { 

// 定义 正则 表达 式 
let pattern = "#[^#]+"; 
let regular — try! NSRegularExpression(pattern: pattern, options:.caselInsensitive) 

et results regular.matches (in: word, options: .reportProgress , range: NSMake Range(0, word.characters.count)) 
// 输出 截取 结果 
print (" 符 合 的 结果 有 \ (results.count) 个 ") 
for result in results { 

word = (word as NSString).substring(with: result.range) 
) 


在 上 面 的 代码 中 ， 首 先 将 commentTxt 中 的 文字 信息 分 割 为 独立 的 字符 串 ， 分 割 的 依据 为 空格 或 换行 。 然 后 通过 for 循 环 迭 代 出 所 有 的 独立 字符 串 ， 为 每 个 字符 串 执行 指定 的 正则 表达 式 ， 看 是 否 有 
hashtag 连 接 存 在 。 


步骤 2 在 for var word in words{.………} 循 环 中 继续 添加 代码 : 


H- 


f word.hasPrefix("#") { 

word = word.trimmingCharacters (in: CharacterSet. punctuationCharacters) 
word = word.trimmingCharacters (in: CharacterSet.symbols) 

let hashtagObj = AVObject(className: "Hashtags") 


hashtagObj?["to"] = commentuuid.last 

hashtagObj?["by"] = AVUser.current ().username! 
hashtagObj?["hashtag"] = word.lowercased() 
hashtagObj?["comment"] = commentTxt.text 
hashtagObj?.savelnBackground(( (success:Bool, error:Error?) in 


if success { 
print("hashtag \ (word) 已 经 被 创建 。") 
}else { 
print (error?.localizedDescription) 
} 
}) 


当 我 们 获取 到 每 一 个 带 有 # 的 hashtag 以 后 ， 首 先 移 除 它 两 端的 标点 和 符号 ， 包 括 开头 的 # 符 号 。 然 后 将 相关 信息 写 入 到 云端 的 Hashtags 数 据 表 中 。 


构建 并 运行 项 目 ， 在 评论 页 面 中 发 布 一 个 带 #Hashtag 的 评论 信息 ， 在 LeanCloud 的 Hashtags 表 中 查看 记录 ， 如 图 30-9 所 示 。 
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图 30-9 ”添加 hashtag 后 ， 相 关 数 据 会 写 到 LeanCloud 数 据 表 中 


步骤 3 ”在 CommentVC 类 的 tableView( :editActionsForRowAt:) 方 法 中 ， 在 Action 1.Delete 部 分 中 的 STEP 1. 从 云端 删除 评论 部 分 的 下 方 ， 添 加 下 面 的 代码 : 


// STEP 2. 从 云端 删除 hashtag 

let hashtagQuery = AVQuery (className: "Hashtags") 

hashtagQuery?.whereKey("to", equalTo: commentuuid.last) 

hashtagQuery?.whereKey("by", equalTo: cell.usernameBtn.titleLabel?.text) 

hashtagQuery?. whereKey ("comment", equalTo: cell.commentlLbl.text) 

hashtagQuery?.findObjectsInBackground((í (objects:[Any]?, error:Error?) in 

if error == nil { 

for object in objects! { 
(object as AnyObject).deleteEventually () 
) 

} 


}) 


当 用 户 在 删除 评论 的 时 候 ， 也 同时 要 在 云端 的 Hashtags 数 据 表 中 删除 相应 的 记录 。 
构建 并 运行 项 目 ， 删 除 某 条 带 有 #hashtag 的 评论 以 后 ， 在 云端 的 Hashtags 数 据 表 中 相应 的 记录 也 被 删除 了 。 


步骤 4 在 CommentVC 类 的 sendBtn_clicked( :) 访 法 中 ， 复 制 乙 前 新 添加 的 代码 ， 然 后 将 其 粘贴 到 UploadVC 类 的 publishBtn_clicked( :) 方 法 中 。 


QIBAction func publishBtn clicked( sender: AnyObject) { 

// 生成 照片 数据 
let imageData mageJPEGRepresentation (piclImg.image!, 0.5) 
let imageFile - AVFile(name: "post.jpg", data: imageData) 
object?["pic"] = imageFile 
// 新 添加 的 代码 发 送 hashtag 到 云端 
let words: [String] = commentTxt.text.components (separatedBy: CharacterSet.whitespaces AndNewlines) 
for var word in words { 

// 定义 正则 表达 式 
let pattern = "#[^#]+"; 
ja regular try! NSRegularExpression(pattern: pattern, options:.caselInsensitive) 

t results regular.matches (in: word, options: .reportProgress , range: NSMakeRange (0, word.characters.count)) 
// 输出 截取 结果 
print ("48-502 千 果 有 \ (results .count) 个 ") 
for result in results { 

word = (word as NSString).substring(with: result.range) 


Pp. ~ 一 


f word.hasPrefix("£") ( 
word = word.trimmingCharacters (in: CharacterSet. punctuationCharacters) 
word = word.trimmingCharacters (in: CharacterSet.symbols) 
let hashtagObj = AVObject(className: "Hashtags") 
hashtagObj?["to"] = commentuuid.last 
hashtagObj?["by"] = AVUser.current ().username! 
hashtagObj?["hashtag"] = word.lowercased() 
hashtagObj?["comment"] = commentTxt.text 
hashtagObj?.savelnBackground(( (success:Bool, error:Error?) in 
if success { 
print("hashtag \ (word) 已 经 被 创建 。") 
Jelse { 
print (error?.localizedDescription) 
} 
}) 


步骤 5 ”将 新 添加 代码 中 的 commentTxt 修 改 为 titleTxt。 


步骤 6 还 是 在 UploadVC 中 的 publishBtn_clicked( ;) 方 法 找到 : 


object?["puuid"] = "N(AVUser.current().username!) N(NSUUID().uuidString)" 


let uuid = NSUUID().uuidString 
object?["puuid"] = "X(AVUser.current().username!) N(uuid)" 


这 样 做 的 原因 是 在 该 方法 下 边 的 代码 中 还 会 用 到 这 个 uuid。 


步骤 7” 还 是 在 publishBtn_clicked( :) 方 法 中 ， 找 到 : 


hashtagObj?["to"] = commentuuid.last 
将 其 修改 为 
hashtagObj?["to"] = "N(AVUser.current().username!) N(uuid)" 


在 UploadVC 中 ， 我 们 是 创建 全 新 的 帖子 ， 所 以 在 这 里 根本 无 法 通过 commentuuid 获 取 到 当前 帖子 的 uuid， 所 以 这 里 直接 使 用 上 面 程序 代码 中 所 生成 的 uuid。 


构建 并 运行 项 目 ， 在 上 传 页 面 中 发 布 带 有 #hashtag 的 内 容 ， 在 云端 的 Hashtags 数 据 表 中 查看 记录 ， 如 图 30-10 所 示 。 
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图 30-10 ”创建 新 帖子 后 添加 到 Hashtags 表 中 的 记录 


本 章 小 结 


本 章 实现 了 Hashtag 和 Mention 两 大 社交 功能 ， 昌 然 代码 偏 多 ， 但 是 实现 的 逻辑 并 不 复杂 。 通 过 正则 表达 式 我 们 可 以 获取 指定 格式 的 字符 串 ， 然 后 再 根据 其 功能 实现 其 相关 功能 。 需 要 注意 的 是 ， 在 将 
Hashtag 添 加 到 LeanCloud 云 端 数据 表 以 后 ， 还 要 实现 删除 它 的 代码 ， 否 则 会 造成 数据 的 混乱 。 


第 31 章 “创建 Hashtag 控 制 器 


在 之 前 的 章节 中 ， 我 们 已 经 实现 了 在 评论 页 面 和 帖子 页 面 中 显示 #Hashtag 连 接 的 效果 ， 但 是 当 用 户 在 单 击 hashtag 连 接 以 后 ， 还 应 该 进入 到 一 个 独立 的 帖子 列表 页 面 ， 显 示 所 有 被 标记 相同 hashtag 的 
照片 ， 本 章 我 们 就 来 实现 这 个 功能 。 


31.1 创建 Hashtag 控 制 器 界面 


步骤 1 从 对 象 库 拖 擅 一 个 新 的 Collection View Controller 到 故事 板 中 ， 在 大 纲 视图 中 选中 Collection View ， 然 后 在 Attributes Inspector 中 将 Background 设 置 为 White Color， 如 图 31-1 所 示 。 


图 31-3 单 击 hashtag 标 签 以 后 会 跳 转 到 HashtagsVC 控 制 器 


步骤 2 确保 还 是 选中 Collection View 的 情况 下 ， 在 Size Inspector 中 将 Min Spacing 的 For Cells 和 For Lines 均 设置 为 0， 将 Cell Size 的 width 和 height 均 设置 为 105。 


步骤 3 ”在 项 目 导航 中 创建 一 个 Cocoa Touch Class 文 件 ，Subclass of 设置 为 UICollec-tionViewController，Class 设 置 为 HashtagsVC。 

步骤 4 在 故事 板 中 选中 刚 创建 的 控制 器 ， 在 ldentity Inspector 中 将 Class 设 置 为 HashtagsVC， 同 时 将 Storyboard ID 也 设置 为 HashtagsVC。 

步骤 5 在 大 纲 视图 中 选中 Collection View Cell, Œldentity Inspector 中 将 Class 设 置 为 PictureCell， 在 Attributes Inspector 中 将 Identifier 设置 为 Cell。 

之 所 以 不 再 为 集合 视图 创建 一 个 新 的 UICollectionViewCell 类 ， 是 因为 HashtagsVC 中 的 集合 视图 单元 格 与 PostVC 中 的 集合 视图 单元 格 内容 一 致 ， 所 以 进行 了 复 用 。 


步骤 6 ”从 对 象 库 中 拖 电 一 个 Image View 到 集合 视图 单元 格 之 中 ， 在 Size Inspector 中 将 x 和 y 设 置 为 0%0，width 和 height 均 设置 为 105。 在 Attributes Inspector 中 将 Image 设 置 为 pbg.jpg。 
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图 31-1 将 Collection View 的 背景 设置 为 White Color 


步骤 7 将 Xcode 切 换 到 助手 编辑 器 模式 ， 将 HashtagsVC 控 制 器 中 集合 视图 单元 格 里 面 的 Image View 与 PictureCell 类 中 的 picImg 建 六 Outlet 关 联 ， 如 图 31-2 所 示 。 
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// 
// 
// 
// 
// 
// 
// 


import UIKit 


l Connect Outlet | 
override func awakeFromNib() { z 


PictureCell.swift 
Instagram 


Created by 刘 铭 on 16/7/9. ^ 
Copyright e 2816 年 刘 铭 ，A1L1 Xights reserved. 


super,awakeFromNib() 


图 31-2 为 Cell 中 的 Image View 5 PictureCellz£ 3: Outlet X J% 


312 ”实现 Hashtag 的 交互 


当 用 户 单 击 Hashtag 连 接 以 后 应 该 会 跳 转 到 HashtagsVC 控 制 器 ， 接 下 来 我 们 就 实现 这 个 交互 功能 。 


在 HashtagsVC.swift 文 件 中 创建 一 个 全 局 字符 串 数 组 hashtag， 并 删除 私有 常量 reuseldentifier。 


步骤 1 
import UIKit 
private let reuseIdentifier - "Cell" 


var hashtag = [String] () 


class HashtagsVC: UIlCollectionViewController { 


步骤 2 在 CommentVC 中 的 tableView( :cellForRowAt:) 方 法 里 面 ， 在 处 理 @Mention 单 击 代码 的 下 面 ， 继 续 添 加 新 的 代码 : 


// #hashtag is tapped 
cell.commentLbl.hashtagLinkTapHandler = { label, handle, rang in 
var mention = handle 


men 


tion = String (mention.characters.dropFirst ()) 


hashtag.append (mention.lowercased()) 


let 


hashvc = self.storyboard?.instantiateViewController(withIdentifier: "HashtagsVC") as! HashtagsVC 


self.navigationController?.pushViewController(hashvc, animated: true) 


V E] View as: iPhone 6s (wC nR) 


当 用 户 单 击 KILabel 对 象 中 的 hashtag 连 接 以 后 ， 就 会 执行 hashtagLinkTapHandler 所 定义 的 闭 包 代码 。 与 之 前 设置 @mention 闭 包 的 参数 类 似 ，label 是 用 户 所 单 击 的 Label 的 文本 内 容 ，handle 则 是 用 
户 单 击 的 hashtag 的 连接 ，rang 则 是 hashtag 的 范围 。 


在 闭 包 中 首先 去 掉 hashtag 的 前 缀 #， 然 后 将 hashtag 添 加 到 全 局 数组 hashtag 中 ， 便 于 后 面 在 进入 到 HashtagsVC 控 制 器 的 时 候 直接 读 取 访问 ， 在 半 包 的 最 后 则 


是 通过 导航 控制 器 进入 HashtagsVC 控 制 


步骤 3 打开 HashtagsVC 类 ， 将 viewDidLoad() 方 法 调整 为 下 面 这 样 : 


override func viewDidLoad() { 
super.viewDidLoad() 


} 


步骤 4 在 collectionView( :cellForltemAt:) 方 法 中 ， 将 下 面 的 一 行 代 码 : 


let cell = collectionView.dequeueReusableCell (withReuseIdentifier: reuseldentifier, for: indexPath) 


let cell = collectionView.dequeueReusableCell (withReuseIdentifier: "Cell", for: indexPath) as! PictureCell 


构建 并 运行 项 目 ， 在 CommentVC 控 制 器 中 单 击 某 个 #hashtag 连 接 ， 应 用 程序 会 自动 跳 转 到 HashtagsVC， 如 图 31-3 所 示 。 


图 31-3 ” 单 击 hashtag 标 签 以 后 会 跳 转 到 HashtagsVC 控 制 器 


除了 实现 CommentVC 控 制 器 的 #hashtag 交 互 以 外 ， 还 要 对 PostVC 控 制 器 实现 相同 的 功能 。 


步骤 5 复制 CommentVC 类 tableView( :cellFor RowAt:) 方 法 中 @mention 和 #hashtag 被 单 击 的 处 理 代 码 ， 将 其 粘贴 到 PostVC 类 的 tableView(_ :cellF orRowAt:) 方 法 中 ， 粘 贴 之 后 将 commentLb| 修 
改 为 titleLbl。 


构建 并 运行 项 目 ， 上 传 一 个 带 有 @mention 和 #hashtag 的 帖子 照片 ， 单 击 测试 通过 ! 


31.3 ”实现 HashtagsVC 类 的 代码 


目前 的 HashtagsVC 控 制 器 还 不 能 显示 任何 的 帖子 照片 ， 接 下 来 我 们 就 需要 实现 这 个 功能 。 
步骤 1 在 HashtagsVC 类 中 添加 2 个 属性 。 


// UI objects 
var refresher: UlRefreshControl! 
var page: Int - 24 


refresher 用 于 集合 视图 的 刷新 操作 ，page 则 用 于 从 云端 处 理 分 页 载 入 的 数据 。 


步骤 2 ”在 viewDidLoad() 方 法 中 ， 添 加 下 面 的 初始 化 代码 : 


override func viewDidLoad() { 
super.viewDidLoad() 
self.collectionView?.alwaysBounceVertical = true 
self.navigationItem.title = "4" + "N(hashtag.last!.uppercased())" 


} 


这 里 让 集合 视图 垂直 方向 滚动 ， 并 且 将 导航 栏 的 Title 设 置 为 主题 标签 的 名 称 。 


步骤 3 从 GuestVC 的 viewDidLoad() 方 法 中 复制 下 面 的 代码 ， 将 其 粘贴 到 viewDidLoad() 方 法 中 。 


// 定义 导航 栏 中 新 的 返回 按钮 

self.navigationItem.hidesBackButton = true 

let backBtn = UIBarButtonItem (title: "返回 ", style: .plain, target: self, action: #selector (back( :))) 
self.navigationlItem.leftBarButtonItem = backBtn 

// 实现 向 右 划 动 返回 
let backSwipe = UISwipeGestureRecognizer (target: self, action: #selector (pacK( :))) 
backSwipe.direction — .right 
self.view.addGestureRecognizer (backSwipe) 
// 安装 refresh 控 件 
refresher = UIRefreshControl () 

refresher.addTarget(self, action: #selector (refresh), for: .valueChanged) 
self.collectionView?.addSubview (refresher) 


步骤 4 再 从 GuestVC 类 中 复制 back(_:) 和 refresh() 方 法 到 HashtagsVC 类 中 。 将 guestArray 蔡 换 为 hashtag。 


func back( : UIBarButtonItem) { 
// 退回 到 之 前 的 控制 器 
= self.navigationController?.popViewController (animated: true) 
// 从 hashtag 数 组 中 移 除 最 后 一 个 主题 标签 
if !hashtag.isEmpty { 
hashtag.removeLast () 
J 
} 
// 刷新 方法 
func ref Fresh () { 
self.collectionView?.reloadData () 
self.refresher.endRefreshing () 


} 


步骤 5 在 HashtagsVC 类 中 创建 一 个 新 的 方法 loadHashtags0。 


// 3X Xhashtag 
func loadHashtags() { 


e 


步骤 6 在 HashtagsVC 类 中 再 添加 三 个 新 的 属性 ， 用 于 存储 从 云端 获取 到 的 记录 数据 。 


// 从 云端 获取 记录 后 ， 存 储 数 据 的 数组 
var picArray = [AVFile] () 

var puuidArray = [String] () 

var filterArray = [String] () 


其 中 ，picArray 用 于 存储 帖子 照片 ，puuidArray 用 于 存储 帖子 的 puuid， 而 filterArray 则 用 于 存储 过 滤 出 来 的 符合 条 件 的 帖子 。 


步骤 7 在 loadHashtags() 方 法 中 ， 添 加 下 面 的 代码 : 


// 载 入 hashtag 

func loadHashtags() { 
// STEP 1. 获取 与 Hashtag 相 关 的 帖子 
let hashtagQuery = AVQuery (className: "Hashtags") 
hashtagQuery?.whereKey("hashtag", equalTo: hashtag.last!) 
hashtagQuery?.findObjectsInBackground((í (objects:[Any]?, error:Error?) in 


if eao == nil { 
// 清空 filterArray 数组 
self.filterArray.removeAll(keepingCapacity: false) 


// 存储 相关 的 帖子 到 filterArray 数 组 
for object in objects! ( 
self.filterArray.append((object as AnyObject).value(forKey: "to") as! String) 


vs 首先 创建 了 数据 表 查 询 对 象 ， 然 后 从 云端 的 Hashtags 数 据 表 中 查找 符合 要 求 的 记录 ， 我 们 是 从 CommentVC 或 PostVC 中 切换 到 当前 控制 器 的 ， 在 切换 之 前 已 经 将 被 单 击 的 
题 标签 压 入 到 hashtag 数 组 之 中 了 ， 所 以 在 这 里 直接 使 用 hashtag.last! 就 可 以 得 到 这 个 主题 标签 。 在 获取 到 相关 记录 以 后 ， 把 帖子 的 puuid 存 储 到 了 filterArray 数 组 之 中 。 


步骤 8 在 findObjectslnBackground(0 闭 包 内 ，for 循 环 的 下 面 继续 添加 代码 : 


if r == nil { 
// 清空 filterArray 数组 
self.filterArray.removeAll(keepingCapacity: false) 


// 存储 关 的 帖子 到 filterArray 数 组 
for object in objects! { 
self.filterArray.append((object as AnyObject).value(forKey: "to") as! String) 
} 
// STEP 2. 通过 filterArray 的 uuid， 找 出 相关 的 帖子 


let query = AVQuery (className: "Posts") 
query?.whereKey("puuid", containedIn: self.filterArray) 
query?.limit = self.page 


query?.addDescendingOrder ("createdA 


query?.findObjectsIn 


if error == nil { 
// 清空 数组 


Background(( (objects:[Any]?, error:Error?) in 


self.picArray.removeAll(keepingCapacity: false) 
self.puuidArray.removeAll(keepingCapacity: false) 


for object in objects! { 


self.picArray.append((object as AnyObject).value(forKey: "pic") as! AVFile) 


self.puuidArray.append((object as AnyObject).value(forKey: "puuid") as! String) 


} 
/ / reload 


self.collectionView?.reloadData () 


self.refresher.endRe 


}else { 


freshing () 


print (error?.localizedDescription) 


} 
}) 


}else { 
print (error?.localizedDescription) 


} 


利用 AVQuery 类 的 whereKey( :containedln:) 方 法 获取 所 有 相关 的 Postib 录 ， 然 后 将 Post 记 录 中 的 pic 添 加 到 picArray 数 组 中 ，puuid 添 加 到 puuidArray 数 组 中 ， 最 后 刷新 集合 视图 ， 并 且 让 刷新 控件 停 
止 刷新 动画 。 


步骤 9 在 HashtagsVC 类 中 重 写 scrollViewDidScroll( ;方法 。 


override 
if scrollView.contentO 


} 


当 用 户 拖 电 集 合 视图 的 垂直 偏 移 量 大 于 集合 视图 contentSize 高 度 的 三 分 之 一 时 ， 就 会 执行 loadMore() 方 法 。 


func scrollViewDidScroll(  scrollView: UIScrollView) { 


loadMore () 
} 


Ffset.y >= scrollView.contentSize.height / 3 { 


步骤 10 ”在 HashtagsVC 类 中 添加 loadMore() 方 法 。 


// 用 于 分 页 


在 该 方法 中 ， 如 果 从 


步骤 11 


func loadMore() { 


// 如 果 服 务 器 端的 帖子 大 于 默认 显示 数量 


page = page + 15 


if page <= puuidArray.count { 


// STEP 1. 获取 与 Hashtag 相 关 的 帖子 
let hashtagQuery = AVQuery (className: "Hashtags") 
hashtagQuery?.whereKey("hashtag", equalTo: hashtag.last!) 


hashtagQuery?.findObjectsl 


if error == nil 


{ 


[nBackground(( (objects:[Any]?, error:Error?) in 


// 清空 filterArray 数组 


self. 


sel 


Fi 
// 存储 相关 的 帖子 到 : 


for object in objects! 


} 


// STEP 2. 通过 |: 


terArray.removeAll(keepingCapacity: false) 
filterArray 数 组 


{ 


.filterArray.append((object as AnyObject).value(forKey: "to") as! String) 


FilterArray 的 uuid， 找 出 相关 的 帖子 


let query = AVQuery(className: "Posts") 


query?.whereKey("puuid", containedIn: self.filterArray) 


query?.limit = seli 


f. page 


query? .addDescendingOrder ("createdAt") 
query?.findObjectsInBackground(( (objects: [Any]?, error:Error?) in 


if error == 


nil 


// 清空 数组 


{ 


self.picArray.removeAll(keepingCapacity: false) 
self.puuidArray.removeAll(keepingCapacity: false) 


for object in objects! { 


self.picArray.append((object as AnyObject).value(forKey: "pic") as! AVFile) 


self.puuidArray.append((object as AnyObject).value(forKey: "puuid") as! String) 


} 
// reload 


self.collectionView?.reloadData () 


}else { 


print (error?.localizedDescription) 


} 
)) 


}else { 


print (error?.localizedDescription) 


— Ml 


ZS 


— Ml 


获取 到 的 帖子 数量 大 于 默认 的 显示 数量 ， 则 仿照 loadHashtags() 方 法 ， 重 新 从 云端 
注意 将 self.refresherendRefreshing( 代 码 删 除 ， 因 为 我 们 是 让 集合 视图 在 用 户 拖 昂 了 三 分 之 一 偏 移 量 的 时 候 进行 刷新 载 入 的 ， 所 以 它 并 没有 在 refresher 控 件 生效 时 被 执行 。 


HashtagsVC 中 的 numberOfSections(in :) 方 法 。 


class HashtagsVC: UI 


[CollectionViewController,UICollectionViewDelegateFlowLayout { 


// 设置 单元 格 大 小 


func collectionView( 


载 入 PostiD 录 ， 我 们 可 以 直接 从 loadHashtags() 方 法 中 复制 代码 ， 并 粘贴 到 loadM ore() 方 法 


从 HomeVC 类 中 复制 collectionView( :layout:sizeForltemAt:), collectionView( :numberOfltemslnSection:) 和 collectionView( :cellForltemAt:) 三 个 方法 到 HashtagsVC 中 ， 并 删除 


let size = CGSize(width: self.view.frame.width / 3, height: self.view.frame.width / 3) 


return size 


} 


override func collec 


return picArray.count 


} 


override func collec 


// 从 集合 视图 的 可 复 用 队列 中 获取 单元 格 对 象 


let cell = collectionView.dequeueReusableCell (withReuseIdentifier: "Cell", for: indexPath) 


// 从 picArray 数 组 中 获取 图 片 
picArray [indexPath.row] .getDataInBackground ( (data:Data?, error:Error?) in 


if error == nil 


cell.piclImg.image 


}else{ 


{ 


-U 


mage (data: data!) 


print (error?.localizedDescription) 


} 
} 


return cell 


collectionView: UICollectionView, layout collectionViewLayout: UlCollectionViewLayout, sizeForltemAt indexPath: IndexPath) -> CGSize { 


tionView( collectionView: UICollectionView, numberOfltems InSection section: Int) -> Int { 


tionView(  collectionView: UlCollectionView, cellForlItemAt indexPath: IndexPath) -> UlCollectionViewCell { 


as! PictureCell 


复制 的 这 三 个 方法 分 别 用 于 设置 集合 视图 单元 格 的 大 小 和 数量 以 及 从 可 复 用 队列 中 生成 单元 格 对 象 。 删 除 numberOfsections(in:) 方 法 是 因为 在 默认 情况 下 集合 视图 的 Section 被 设置 为 1。 


Quiz 在 声明 HashtagsVC 类 的 时 候 添加 UICollectionViewDelegateFlowLayout 协 议 ， 这 是 因为 collectionView(_:layout:sizeForltemAt:) 是 该 协议 的 方法 。 如 果 HashtagsVC 不 符合 该 协议 ， 则 在 设置 单元 格 大 小 


的 时 候 不 会 调用 该 方法 。 


步骤 12 再 从 HomeVC 类 中 复制 collectionView( :didSelectltemAt:) 方 法 到 HashtagsVC 类 中 。 


// go post 
override func collectionView(  collectionView: UlCollectionView, didSelectItemAt indexPath: IndexPath) { 
// AiÉpost uuid 到 postuuid 数 组 中 
postuuid.append (puuidArray[indexPath.row]) 
// 导航 到 PostVC 控 制 器 
let postVC = self.storyboard?.instantiateViewController (withIdentifier: "PostVC") as! PostVC 
self.navigationController?.pushViewController (postVC, animated: true) 


步骤 13 ”在 HashtagsVC 类 中 的 viewDidLoad() 方 法 和 refresh() 方 法 中 添加 对 loadHashtags() 方 法 的 调用 。 


构建 并 运行 项 目 ， 不 管 是 从 CommentVC 单 元 格 单 击 的 hashtag， 还 是 从 PostVC 单 元 格 单 击 的 hashtag， 都 能 够 从 导航 控制 器 进入 HashtagsVC 控 制 器 ， 并 显示 相关 hashtag 的 帖子 ， 如 图 31-4 所 示 。 
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图 31-4 单 击 hashtag 标 签 以 后 跳 转 到 HashtagsVC 控 制 器 


Qua 请 在 输入 hashtag 的 时 候 一 定 确保 在 它 的 结尾 处 添加 一 个 空格 ， 否 则 通过 现 有 的 正则 表达 式 无 法 生成 正确 的 主题 标签 。 


本 章 小 结 


本 章 创建 了 一 个 全 新 的 集合 视图 控制 器 ， 在 控制 器 中 根据 主题 标签 从 LeanCloud 云 端 载 入 相关 的 帖子 信息 ， 然 后 再 将 帖子 照片 显示 在 集合 视图 之 中 ， 代 码 虽 然 较 多 ， 但 是 逻辑 实现 并 不 复杂 ， 只 要 思路 
清楚 就 不 会 出 现 Bug。 


第 32 章 ”处理 More 按 钮 的 响应 交互 


在 PostVC 控 制 器 页 面 中 ， 我 们 已 经 设置 了 喜爱 和 评论 按钮 的 响应 交互 动作 ， 在 本 章 中 我 们 将 实现 更 多 按钮 的 响应 动作 。 


32.1 创建 More 按 钮 的 Action 关 联 


步骤 1 将 Xcode 切换 到 助手 编辑 器 模式 ， 在 故事 板 中 将 PostVC 单 元 格 中 的 More 按 钮 与 PostVC 类 建立 Action 关 联 ，Name 设 置 为 : moreBtn clicked, 


IBAction func moreBtn clicked( sender: AnyObject) { 


— (e 


Qaz 这 里 我 们 将 单元 格 中 的 More 按 钮 与 PostVC 类 建立 Action 关 联 ， 而 不 是 常规 的 在 PostCell 类 中 建立 Action 关 联 。 用 意 与 之 前 的 Like 按 钮 和 Comment 按 钮 一 样 ， 都 是 在 用 户 单 击 该 按钮 以 后 ， 需 要 在 


PostVC 控 制 器 层面 执行 一 些 代 码 。 


步骤 2 在 PostVC 类 的 tableView( :cellForRowAt:) 方 法 中 ， 添 加 一 行 对 moreBtn.layer 的 赋值 代码 : 


// 将 inqexPath 赋 值 给 三 个 按钮 的 Layez 属 性 的 自 定 义 变 量 
cell.usernameBtn.layer.setValue(indexPath, forKey: "index") 
cell.commentBtn.layer.setValue(indexPath, forKey: "index") 
cell.moreBtn.layer.setValue(indexPath, forKey: "index") 


~ 


32.2 创建 More 按 钮 的 交互 代码 


NI 


步骤 1 回 到 moreBtn_clicked(_: 访 法 ， 添 加 下 面 的 代码 : 


(S 


IBAction func moreBtn clicked( sender: AnyObject) { 
let i = sender.layer.value(forKey: "index") as! IndexPath 


let cell = tableView.cellForRow(at: i) as! PostCell 

// 删除 操作 

let delete = UIAlertAction (title: "删除 "，style: .qefault){(UIALertAction) ->Void in 
// STEP 1. 从 数组 中 删除 相应 的 数据 
self.usernameArray.remove (at: i.row) 
self.avaArray.remove (at: i.row) 
self.picArray.remove (at: i.row) 
self.dateArray.remove (at: i.row) 


self.titleArray.remove (at: i.row) 
self.puuidArray.remove (at: i.row) 


在 该 方法 中 ， 我 们 首先 获取 到 用 户 所 单 击 的 单元 格 ， 以 及 它 的 indexPath。 然 后 定义 了 一 个 UIAlertAction 类 型 的 对 象 ， 它 是 一 个 警告 对 话 框 的 动作 ， 一 会 儿 我 们 会 将 它 添加 到 一 个 UIAlertController 类 
型 的 对 象 中 。 


当 用 户 单 击 这 个 删除 动作 的 时 候 ， 会 先 删除 6 个 数组 中 的 相应 数据 。 


步骤 2  TE//STEP 1. 代 码 的 下 面 继续 添 加 代码 : 


// STEP 2. 删除 云端 的 记录 
let postQuery = AVQuery(className: "Posts") 
postQuery?.whereKey("puuid", equalTo: cell.puuidLbl.text) 
postQuery?.findObjectsInBackground(( (objects:[Any]?, error:Error?) in 
if error == nil { 
for object in objects! { 

(object as AnyObject).deleteInBackground(í (success:Bool, error:Error?) in 
if success ( 

// 发 送 通 知 到 rootViewController 更 新 帖子 

NotificationCenter.default.post(name: NSNotification.Name (rawValue: "uploaded"), object: nil) 

// 销毁 当前 控制 器 

| = self.navigationController?.popViewController (animated: true) 

}else ( 
print (error?.localizedDescription) 
} 
}) 
} 
Jelse { 
print (error?.localizedDescription) 

} 

}) 


在 上 面 的 代码 中 ， 删 除 云端 Posts 数 据 表 中 指定 puuid 的 帖子 ， 如 果 删 除 成 功 则 发 送 uploaded 通 知 消息 ， 并 且 销 毁 当 前 的 PostVC 控 制 器 。 
因为 用 户 只 能 删除 属于 自己 的 帖子 ， 所 以 从 Post VC 控制 器 发 出 uploaded 通 知 消息 以 后 ， 在 HomeVC 控 制 器 中 就 会 接收 到 该 消息 ， 进 而 执行 uploaded(notification:) 方 法 ， 重 新 载 入 帖子 数据 。 


步骤 3 在//STEP 2. 代 码 的 下 面 继续 添加 代码 : 


// STEP 3. 删除 帖子 的 Like 记 录 
let likeQuery = AVQuery(className: "Likes") 
likeQuery?.whereKey("to", equalTo: cell.puuidLbl.text) 
likeQuery?.findObjectsInBackground(( (objects:[Any]?, error:Error?) in 
if error == nil ( 
for object in objects! { 

(object as AnyObject).deleteEventually () 

} 

} 

}) 


因为 帖子 被 删除 了 ， 所 以 相关 的 Likes 记 录 也 要 全 部 删除 。 


步骤 4 在 //STEP 3. 代 码 的 下 面 继续 添 加 代码 : 


// STEP 4. 删除 帖子 相关 的 评论 

let commentQuery = AVQuery (className: "Comments") 

commentQuery?.whereKey("to", equalTo: cell.puuidLbl.text) 

commentQuery?.findObjectsInBackground(( (objects:[Any]?, error:Error?) in 

if error == nil { 

for object in objects! { 
(object as AnyObject).deleteEventually () 


} 

} 
}) 
// STEP 5. 删除 帖子 相关 的 Hashtag 
let hashtagQuery = AVQuery(className: "Hashtags") 
hashtagQuery?.whereKey("to", equalTo: cell.puuidLbl.text) 
hashtagQuery?.findObjectsInBackground(( (objects:[Any]?, error:Error?) in 
if error == nil { 
for object in objects! { 

(object as AnyObject).deleteEventually () 


} 
} 
}) 


上 面 的 代码 分 为 了 两 部 分 ， 第 一 部 分 是 删除 帖子 相关 的 所 有 评论 ， 第 二 部 分 是 删除 帖子 相关 的 所 有 Hashtag。 
步骤 5 在 moreBtn_clicked(_:) 方 法 /删除 操作 代码 部 分 的 下 面 ， 继 续 添加 代码 : 


// 投诉 操作 
let complain = UIAlertAction(title: "投诉 "，Sstyle: .default) ((UIAlertAction) -> Void in 


// 发 送 投诉 到 云端 的 Complain 数 据 表 
let complainObject = AVObject(className: "Complain") 


complainObject?["by"] = AVUser.current ().username 
complainObject?["post"] = cell.puuidLbl.text 
complainObject?["to"] = cell.titleLbl.text 
complainObject?["owner"] = cell.usernameBtn.titleLabel?.text 


complainObject?.savelnBackground(( (success:Bool, error:Error?) in 
if success { 


self.alert(error: "投诉 信息 已 经 被 成 功 提交 ! ", message: "感谢 您 的 支持 ， 我 们 将 关注 您 提交 的 投诉 ! U) 
Jelse( 
self.alert(error: "45j&", message: error!.localizedDescription) 


} 
)) 


如 果 用 户 投 诉 该 帖子 ， 则 创建 AVObject 类 型 的 对 象 ， 填 写 必要 的 字段 信息 并 提交 。 
步骤 6 在 // 投 诉 操作 代码 部 分 的 下 面 ， 继 续 添加 代码 : 


// 取消 操作 


let cancel = UlAlertAction(title: "J", style: .cancel, handler: nil) 


步骤 7 在 // 取 消 操作 代码 部 分 的 下 面 ， 继 续 添加 代码 : 


// 创建 菜单 控制 器 
let menu = UlAlertController(title: "菜单 选项 "，message: nil, preferredStyle: .actionSheet) 
if cell.usernameBtn.titleLabel?.text == AVUser.current().username { 
menu.addAction (delete) 
menu.addAction (cancel) 
jelse { 
menu.addAction (complain) 
menu.addAction (cancel) 
} 
// 显示 菜单 
self.present (menu, animated: true, completion: nil) 


在 上 面 的 代码 中 ， 创 建 了 UIAlertController 控 制 器 ， 如 果 帖 子 创始 人 是 当前 用 户 则 添加 delete 和 cance| 动 作 到 UIAlertController 控 制 器 ， 否 则 添加 complain 和 cancel 动 作 到 UIAlertController。 


步骤 8 在 PostVC 类 中 添加 alert() 方 法 。 


func alert(error: String, message: String) ( 

let alert = UlAlertController(title: error, message: message, preferredStyle: .alert) 
let ok = UIAlertAction(title: "OK", style: .cancel, handler: nil) 

alert.addAction (ok) 
self.present(alert, animated: true, completion: nil) 


} 


构建 并 运行 项 目 ， 选 择 自己 发 布 的 帖子 ， 单 击 more 按 钮 以 后 ， 效 果 如 图 32-1 所 示 。 


单 击 删 除 以 后 ， 程 序 会 删除 云端 的 Posts 数 据 表 中 的 帖子 记录 ， 当 成 功 删 除 以 后 则 会 发 送 uploaded 通 知 消息 ， 并 返回 到 HomeVC 控 制 器 。HomeVC 控 制 器 在 接收 到 uploaded 通 知 消息 以 后 会 刷新 集合 
视图 。 


接 下 来 ， 在 删除 操作 中 还 会 删除 云端 的 Like 记 录 、 评 论 记 录 以 及 hashtag 记 录 。 


如 果 在 访问 其 他 用 户 的 PostVC 中 单 击 more 按 钮 ， 就 会 出 现 投诉 选项 ， 如 图 32-2 所 示 。 
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EK32-2 ” 单 击 投诉 以 后 实现 的 效果 


单 击 投诉 以 后 ， 程 序 代码 会 将 相关 投诉 信息 记录 上 传 到 云端 的 Complain 数 据 表 中 ， 如 图 32-3 所 示 。 
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& 32-3 


323 ”为 项 目 设置 返回 和 币 腿 出 按钮 


LeanCloud 云 端 数据 表 中 新 添加 的 记录 


目前 ,项 目 导 航 栏 中 所 有 的 返回 按钮 还 只 是 文字 形式 ， 在 这 部 分 中 ， 我 们 将 其 重新 设置 为 图 形 化 按钮 。 


ARS 从 资源 文件 夹 中 拖 忠 back.png、back@2x.png 和 back@3x.png 三 个 文件 到 项 目 之 中 ， 勾 选 Copy items if needed 和 Add to targets:Instagram。 


步骤 2 在 CommentVC 类 的 viewDidLoad0 方 法 中 , 将 


let backBtn = UI 


修改 为 : 


BarButtonItem(title: "返回 ",， style: .plain, target: self, 


action: #selector (back( :))) 


let backBtn - UI 


BarButtonItem(image: UIImage (named: "back.png"), style: 


.plain, target: self, action: #selector (back( :))) 


步骤 3 在 PostVC 类 的 viewDidLoad() 方 法 中 ， 将 backBtn 进 行 同 样 的 修改 。 


let backBtn = UIBarButtonItem(image: UIImage (named: "back.png"), style: 


.plain, target: self, action: 4selector(back( :))) 


步骤 4 在 GuestVC 类 的 viewDidLoad() 方 法 中 ， 将 backBtn 进 行 同样 的 修改 。 


let backBtn = UIBarButtonItem(image: UIImage (named: "back.png"), style: 


.plain, target: self, action: #selector (back( :))) 


步骤 5 在 GuestVC 类 的 viewDidLoad0) 方 法 中 ， 复 制 返回 按钮 和 向 右 划 动手 势 的 定义 代码 ， 将 其 粘贴 到 FollowersVC 类 的 viewDidLoad0 方 法 中 。 


// 定义 导航 栏 中 新 的 返回 按钮 


self.navigationl 


tem.hidesBackButton - true 


let backBtn = UlBarButtonItem(image: UIImage (named: "back.png"), style: 


self.navigationlItem.leftBarButtonItem = backBtn 
// 实现 向 右 划 动 返回 
let backSwipe = U 
backSwipe.direction = .right 
self.view.addGes! 


cureRecognizer (backSwipe) 


步骤 6 在 FollowersVC 类 中 添加 back(_:) 方 法 。 


BarButton] 


func back( : UI 


// 退回 到 之 前 的 控制 器 
| = self.navigationController?.popViewController (animated: true) 


[tem) { 


构建 并 运行 项 目 ， 导 航 栏 中 所 有 的 返回 按钮 均 已 图 片 的 形式 出 现 ， 如 图 32-4 所 示 。 


步骤 7 在 项 目 导航 中 ， 将 所 有 的 按钮 类 图 片 创建 一 个 组 ， 名 称 为 button items, 


.plain, target: self, action: #selector(back( :))) 


ISwipeGestureRecognizer(target: self, action: 4selector(back( :))) 


步骤 8 ”从 资源 文件 夹 中 拖 蝶 logout.png、logout@2x.png 和 Ilogout@3x.png 三 个 文件 到 项 目的 button items 组 中 ， 勾 选 Copy items if needed 和 Add to targets: Instagram, 
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图 32-4 设置 后 的 返回 按钮 外 观 


步骤 9 ”在 故事 板 中 将 HomeVC 控 制 器 视图 里 面 的 导航 栏 中 右 侧 的 Bar Button ltem 的 lImage 属 性 设置 为 logout.png， 如 图 32-5 所 示 。 


图 32-5 ”设置 HomeVC 中 退出 按钮 的 外 观 


32.4 处理 不 存在 的 用 户 


当 我 们 在 发 布 帖 子 或 发 表 评论 时 ， 使 用 @mention 连 接 某 个 人 时 ， 有 可 能 会 发 生 该 用 户 不 存在 的 情况 ， 这 就 需要 我 们 进行 判断 和 处 理 。 


步骤 1 在 GuestVC 类 的 collectionView( :viewForSupplementaryElementOfKind:at:) 方 法 中 ， 将 下 面 的 代码 : 


guard let objects = objects , objects.count > 0 else { 
return 


guard let objects = objects , objects.count > 0 else ( 
et cuam UIAlertController (title: "X(guestArray.last?.username)", message: "用 尽 洪荒 之 力 ， 也 没有 发 现 该 用 户 的 存在 ! ", preferredStyle: .alert) 
let ok = UIAlertAction(title: "OK", style: .default, handler: { (UIAlertAction) in 

= self.navigationController?.popViewController (animated: true) 


}) 
alert.addAction (ok) 
self.present (alert, animated: true, completion: nil) 
return 


在 上 面 的 代码 中 ， 如 果 获 取 到 的 用 户 记录 数 为 0， 则 弹出 UIAlertController 控 制 器 ， 显 示 相 关 的 信息 。 


步骤 2 在 PostVC 类 的 tableView( :cellForRowAt:) 方 法 中 ， 在 //@mentions is tapped 部 分 ， 将 代码 修改 为 下 面 这 样 : 


query?.findObjectsInBackground(( (objects:[Any]?, error:Error?) in 
if let object = objects?.last ( 
guestArray. append (object as! AVUser) 


let guest = self.storyboard?.instantiateViewController (withldentifier: "GuestVC") as! GuestVC 
self.navigationController?.pushViewController (guest, animated: true) 

Jelse ( 
let alert = UlAlertController(title: "N(mention.uppercased())", message: "用 尽 洪 蕊 之 力 ， 也 没有 发 现 该 用 户 的 存在 ! ", preferredStyle: .alert) 
let ok = UIAlertAction(title: "OK", style: .cancel, handler: nil) 


alert. e i 
self.present(alert, animated: true, completion: nil) 
} 
}) 


如 果 在 _User 数 据 表 中 没有 找到 @mention 所 提 到 的 用 户 名 ， 则 弹出 警告 对 话 框 。 


步骤 3 在 CommentVC 类 的 tableView( :cellForRowAt:) 方 法 中 ， 在 /@mentions is tapped 部 分 ， 实 现 与 步骤 2 相同 的 代码 : 


query?.findObjectsInBackground(( (objects:[Any]?, error:Error?) in 
if let object = objects?.last ( 
questArray. append (object as! AVUser) 


let guest = self.storyboard?.instantiateViewController (withlIdentifier: "GuestVC") as! GuestVC 
self.navigationController?.pushViewController (guest, animated: true) 

Jelse ( 
let alert = UlAlertController(title: "N(mention.uppercased())", message: "用 尽 洪 蕊 之 力 ， 也 没有 发 现 该 用 户 的 存在 ! ", preferredStyle: .alert) 
let ok = UIAlertAction(title: "OK", style: .cancel, handler: nil) 


alert.addAction (ok) 
self.present(alert, animated: true, completion: nil) 
} 
}) 


步骤 4 在 HeaderView 类 的 awakeFromNib() 方 法 中 ， 在 button.frame 代 码 的 下 面 添加 一 行 代 码 ， 让 button 变 成 圆 角 。 


button.layer.cornerRadius = button.frame.width / 50 


构建 并 运行 项 目 ， 在 PostVC 或 者 是 CommentVC 中 单 击 一 个 并 不 存在 的 @mention， 效 果 如 图 32-6 所 示 。 
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图 32-6 单 击 不 存在 用 户 后 的 效果 


本 章 小 结 


本 章 我 们 对 PostVC 控 制 器 的 More 按 钮 进行 了 处 理 ， 它 包含 两 个 功能 : 删除 自己 发 布 的 帖子 以 及 投诉 访客 的 帖子 。 需 要 注意 的 是 : 它们 呈现 的 条 件 是 不 同 的 ， 只 能 删除 自己 的 帖子 和 只 能 投诉 访客 的 帖 
子 。 在 处 理 不 存在 的 用 户 时 ， 我 们 使 用 了 AlertViewController 类 ， 这 个 大 家 并 不 陌生 。 


另外 ， 本 章 所 提供 的 所 有 按钮 Icon 图 标 都 可 以 通过 Sketch 软件 手工 绘制 ， 请 扫 拉 下 面 的 二 维 码 观看 制作 Icon 图 标的 视频 教程 。 


y 


Logout 图 标的 制作 


: 第 33 章 ”创建 Feed 控 制 器 


- 第 34 章 ”创建 用 户 搜索 功能 


: 第 35 章 ”创建 通知 控制 器 界面 


| 第 36 章 ”接收 数据 到 通知 控制 器 


.第 37 章 对 用 户 界面 的 再 改进 


在 本 章 我 们 需要 处 理 的 是 应 用 程序 的 Feed 页 面 ， 也 就 是 聚合 信息 页 ， 通 过 该 页 面 用 户 可 以 发 现 更 多 、 更 有 意思 的 照片 ， 并 且 能 够 将 照片 的 发 布 者 设置 为 自己 所 关注 的 人 ， 如 图 33-1 所 示 。 
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图 33-1 Instagram 的 聚合 页 面 


33.1 创建 Feed 控 制 嚣 的 用 户 界面 


按照 正常 的 界面 制作 流程 来 说 ， 应 该 从 对 象 库 中 拖 忠 一 个 全 新 的 表格 视图 控制 器 到 编辑 区 域 之 中 ， 然 后 再 设置 单元 格 中 的 界面 控件 。 由 于 我 们 所 设计 的 Feed 控 制 器 视图 与 之 前 的 PostVC 控 制 器 视图 极 
为 相似 ， 因 此 在 故事 板 中 直接 复制 一 个 即 可 。 


步骤 1 从 大 纲 视图 中 选中 PostVC Scene 中 的 PostVC， 然 后 复制 /粘贴 ， 此 时 故事 板 中 有 两 个 PostVC 控 制 器 ， 如 图 33-2 所 示 。 


步骤 2 ”选中 新 复制 的 表格 视图 控制 器 ， 在 ldentity Inspector 中 将 Class 和 Storyboard ID 设置 清空 ， 之 后 会 为 该 控制 器 设置 新 的 控制 器 类 和 Storyboard ID 标识。 
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图 33-2 在 故事 板 中 复制 一 个 Post VC 控制 器 


Qn 我 们 还 要 确保 新 控制 器 中 单元 格 的 Class 设 置 为 PostCell， 因 为 PostCell 类 负责 单元 格 中 所 有 界面 控件 的 自动 布局 约束 ， 在 Feed 页 面 所 显示 的 布局 效果 与 在 PostVC 页 面 中 一 致 ， 所 以 直接 复 用 该 类 
即 可 。 


步骤 3 ”选中 新 创建 的 表格 视图 控制 器 ， 从 Xcode 菜单 中 选择 Editor 一 Embed In 一 Navigation Controller。 选 中 新 创建 的 导航 栏 控 制 器 ， 在 ldentity Inspector 中 将 Class 设 置 为 NavVC。 在 故事 板 中 从 
Tab Bar 控 制 器 按 住 Control 键 拖 蝶 鼠 标 到 新 创建 的 导航 控制 器 ， 在 弹出 的 菜单 中 选择 Relationship Seuge 一 view controllers， 如 图 33-3 所 示 。 
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图 33-3 ”为 Tab Bat 控 制 器 创建 第 三 个 子 视图 


步骤 4 在 Tab Bar 控 制 器 中 ， 将 新 添加 的 Tab Bar Item 移 到 标签 栏 的 首位 ， 如 图 33-4 所 示 。 


图 33-4 设置 集合 页 面 为 Tab Bat 控 制 器 的 第 一 个 Item 
步骤 5 在 项 目 导航 中 添加 一 个 新 的 Cocoa Touch Class 文 件 ，Subclass of 设置 为 UITableViewController，Class 设 置 为 FeedVC。 
步骤 6 在 故事 板 中 将 新 创建 的 表格 视图 控制 器 的 Class 设 置 为 FeedVC，Storyboard ID 同样 为 FeedVC。 

接 下 来 ， 我 们 需要 为 表格 视图 添加 一 个 Activity Indicator View 控 件 ， 用 来 显示 一 个 转圈 的 “ 菊 伦 ”， 代 表 正 在 从 云端 载 入 数据 。 


步骤 7 从 大 纲 视 图 选中 FeedVC 视 图 中 的 Table View， 在 Size Inspector 中 将 Row Height 修 改 为 100。 从 对 象 库 中 拖 咏 1 个 View 到 | 单元 格 的 下 面 ， 再 从 对 象 库 拖 忠 1 个 Activity Indicator View 到 View 
之 中 ， 如 图 33-5 所 示 。 最 后 再 将 单元 格 的 高 度 重新 修改 为 450。 


Qz 将 表格 视图 单元 格 的 高 度 设置 为 100， 是 因为 我 们 需要 显 性 地 添加 View 和 Activity Indicator View， 否 则 在 原始 大 小 上 添加 这 两 个 控件 有 些 费 劲 。 
Activity Indicator View， 即 活动 指示 器 。 它 可 以 告知 用 户 有 一 个 操作 正在 进行 中 ， 派 生 自 UIView， 所 以 它 是 视图 ， 也 可 以 附着 在 其 他 视图 上 。 


需要 注意 的 是 ，Activity Indicator View 实 例 提 供 轻 量 级 控件 ， 它 会 显示 一 个 标准 的 旋转 进度 轮 。 当 使 用 该 控件 的 时 候 ， 最 重要 的 是 尺寸 小 。20x20 像 素 是 大 多 数 指示 器 样式 获得 最 清楚 显示 效果 的 尺 
寸 。 只 要 稍 大 一 点 ， 指 示 器 都 会 变 得 模糊 。 
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33.2 


步骤 1 


Gl 


实现 FeedVC 控 


器 的 代码 


ass FeedVC: UITableViewController { 


// UI objects 


dicatorView! 


@IBOutlet weak var indicator: 


UI 


var refresher = UIRefreshControl () 
// 存储 云端 数据 的 数组 

var usernameArray = [String] () 
var avaArray = [AVFile] () 

var dateArray = [Date] () 

var picArray = [AVFile]() 

var titleArray = [String] () 

var puuidArray = [String] () 


// 存储 当前 用 户 所 关注 的 


大 


var followArray = [String] () 


// page size 
var page: I 


ActivityIn 


图 33-5 ”在 单元 格 中 添加 一 个 View 


将 Xcode 切换 为 助手 编辑 器 模式 ， 为 新 添加 的 Activity Indicator View 和 FeedVC 类 建立 Outlet 关 联 ， 并 添加 下 面 的 几 个 属性 。 


其 中 ， 人 存储 云端 数据 的 6 个 数组 分 别 用 于 存储 用 户 名 、 头 像 、 帖 子 日 期 、 帖 子 照片 、 帖 子 标题 和 帖子 的 puuid。 而 followArray 数 组 则 用 于 存储 当前 用 户 关 注 的 人 。 


步骤 2 ”在 FeedVC 类 的 viewDidLoad() 方 法 中 ， 添 加 下 面 的 代码 : 


override func viewDidLoad() ( 


super.viewDidLoad() 


// 导航 栏 的 七 让 Le 


self.navigationItem.title 


// 设置 单元 格 的 动态 行 高 
tableView.rowHeight = 


= "聚合 " 


UITableViewAutomaticDimension 


tableView.estimatedRowHeight = 450 


这 里 为 了 让 单元 格 的 高 度 可 以 根据 内 容 动态 调 


整 ， 


设置 rowHeight 为 UITableView-AutomaticDimension， 将 单元 格 的 预 估 高 度 值 设置 为 450。 


步骤 3 在 viewDidLoad() 方 法 中 ， 设 置 refresher 对 象 ， 并 调用 loadPosts() 方 法 。 


// i& Érefresher 


rei 
self 


Fresher.addTarget (self, action: 
.view.addSubview (refresher) 


// 从 云端 载 入 帖子 记录 
loadPosts () 


虽然 loadPosts() 方 法 还 


步骤 4 在 FeedVC 类 中 添加 loadPosts() 方 法 。 


// 从 云端 载 入 帖子 


func loadPosts() { 


在 该 方法 中 ， 首 先 通 


AVUser.current().getFollowees { 


if error == nil ( 


/ / TR "P 


self.fol lowArray. removeAll (keepingCapacity: 


for object in objects! ( 


(objects: 


dselector(loadPosts), 


[Any]?, error:Error?) 


in 


false) 


self.followArray.append((object as AnyObject).username) 


} 
// 添加 当前 用 户 到 followArray 数 组 中 
self.followArray.append (AVUser.current ().username) 


显示 Feed 帖 子 的 时 候 ， 也 包括 当前 用 户 本 身 。 
步骤 5 在 self.followArray.append 代 码 的 下 面 ， 继 续 添加 代码 : 
let query = AVQuery (className: "Posts") 
query?.whereKey("username", containedIn: self.followArray) 
query?.limit = self.page 
query?.addDescendingOrder ("createdAt") 
query?.findObjectsInBackground(( (objects:[Any]?, error:Error?) in 
if error == nil ( 
/ / T P 
self.usernameArray.removeAll(keepingCapacity: false) 
self.avaArray.removeAll(keepingCapacity: false) 
self.dateArray.removeAll(keepingCapacity: false) 
self.picArray.removeAll (keepingCapacity: False) 
self.titleArray.removeAll(keepingCapacity: false) 
self.puuidArray.removeAll(keepingCapacity: false) 
for object in objects! ( 
self.usernameArray.append((object as AnyObject).value(forKey: 
self.avaArray.append((object as AnyObject).value(forKey: "ava") 


)) 


步骤 6 在 FeedVC 类 中 重 写 scrollViewDidScroll( )757X, 


override f 


self.dateArray.append((object as AnyObject). 
self.picArray .append ( (objec 
self.titleArray.append ( (objec 
self.puuidArray .append ( (objec 


} 


// reload tableView 
self.tableView.reloadData () 


self.refresher.endl 


Refreshing 


Jelse ( 


() 


as AnyObject).value( 
as AnyObject) .value (f 


print (error?.localizedDescription) 


) 


过 AVQuery 类 查询 云端 
的 不 同 信息 存储 到 数组 之 中 。 最 后 


scrol 


lView: UI 


createdAt) 
t as AnyObject).value (forKey: 


unc scrollViewDidScroll( 


if scrollView.conten 


tOffset.y >= scroll 


ScrollView) { 
View.contentSize.height - scrollView. 


forKey: 
orKey: 


for: .valueChangeg) 


没有 实现 ， 但 是 在 viewDidLoad0 方 法 中 会 调用 loadPosts0 方 法 ， 并 且 在 拖 忠 刷新 表格 的 时 候 也 会 调用 loadPosts0 方 法 。 


"username") as! String) 


as! AVFile) 


"pic") as! AVFile) 


"title") as! String) 
"puuid") as! String) 


的 Posts 数 据 表 ， 搜 索 所 有 username 字 段 包 含 在 followArray 数 组 中 的 人 员 帖 子 记录 ， 按 照 创建 时 间 的 由 近 及 远 取出 10 条 。 然 后 清 
， 刷 新 表格 视图 。 


当 用 户 垂 直 拖 动 单元 格 的 时 候 会 调用 该 方法 。 


frame.height * 2 ( 


空 用 于 存储 记录 的 6 个 数组 ， 并 且 将 每 


过 AVUser 类 的 getFollowees() 方 法 获取 到 当前 用 户 所 关注 的 人 ， 然 后 将 这 些 AVUser 对 象 的 username 添 加 到 followArray 数 组 中 ， 并 且 在 最 后 将 当前 用 户 自己 也 添加 进去 ， 因 为 在 


条 记录 


loadMore () 
} 
} 


在 该 方法 中 ， 如 果 拖 动 的 偏 移 量 大 于 ContentSize 的 高 度 减 去 2 倍 的 表格 视图 高 度 ， 就 调用 loadMore() 方 法 。 


步骤 7” 在 FeedVC 类 中 实现 loadMore() 方 法 。 


func loadMore() { 
// 如 果 云 端 获取 到 的 帖子 数 大 于 page 数 

if self.page <= puuidArray.count { 
// 开始 Indicator 动 画 
indicator.startAnimating () 
// 将 bage 数 量 +10 
page = page + 10 


如 果 当 前 的 page 数 小 于 puuidArray 中 存储 的 元 素 个 数 ， 则 需要 我 们 调整 page 的 数量 ,便于 后 面 重新 载 入 帖子 记录 到 | 数组 中 。 


步骤 8 在 page=page+10 语 句 的 后 面 ， 继 续 添加 下 面 的 代码 : 


AVUser.current().getFollowees { (objects:[Any]?, error:Error?) in 
if error == nil ( 
// 清空 数组 
self.followArray.removeAll(keepingCapacity: false) 
for object in objects! { 
self.followArray.append((object as AnyObject).username) 


} 
// 添加 当前 用 户 到 followArray 数 组 中 
self.followArray.append (AVUser.current () .username) 
let query = AVQuery (className: "Posts") 
query? .whereKey ("username", containedIn: self.followArray) 
query?.limit = self.page 
query?.addDescendingOrder ("createdAt 
query?.findObjectsInBackground(( (objects:[Any]?, error:Error?) in 
if error == nil { 

// 清空 数组 

self.usernameArray.removeAll (keepingCapacity: 
self.avaArray.removeAll(keepingCapacity: false) 
self.dateArray.removeAll(keepingCapacity: false) 
self.picArray.removeAll(keepingCapacity: false) 
self.titleArray.removeAll(keepingCapacity: false) 
self.puuidArray.removeAll(keepingCapacity: false) 
for object in objects! { 


self.usernameArray.append((object as AnyObject).value(forKey: "username") as! String) 
self.avaArray.append((object as AnyObject).value(forKey: "ava") as! AVFile) 
self.dateArray.append((object as AnyObject).createdAt) 

self.picArray.append((object as AnyObject).value(forKey: "pic") as! AVFile) 
self.titleArray.append((object as AnyObject).value(forKey: "title") as! String) 
self.puuidArray.append((object as AnyObject).value(forKey: "puuid") as! String) 


} 
// reload tableView 
self.tableView.reloadData () 
self.indicator.stopAnimating () 
}else { 
print (error?.localizedDescription) 


这 部 分 代码 与 之 前 的 loadPosts() 方 法 中 的 代码 极为 相似 ， 只 不 过 将 调用 self.refresher.endRefreshing() 方 法 替换 为 了 self.indicator.stopAnimating0 方 法 。 在 该 方法 中 ,我们 是 先 判断 并 计算 出 新 的 
page， 然 后 再 载 入 帖子 。 


步骤 9 删除 humberOfSections(in:) 方 法 ， 并 修改 tableView( :numberOfRowslnSection:)757X. 


override func tableView(  tableView: UITableView, numberOfRowsInSection section: Int) -> Int { 


return puuidArray.count 


e. 


步骤 10 ”在 故事 板 中 选中 Activity Indicator View 控 件 ， 在 Attributes Inspector 部 分 中 勾 选 Behavior 的 Hides When Stopped， 如 图 33-6 所 示 。 


Activity Indicator View 


Style Gray i3 


Color | L | Default B 


Behavior [ | Animating 
Hides When Stopped 


图 33-6 ”设置 后 的 返回 按钮 外 观 


步骤 11 在 FeedVC 类 的 viewDidLoad0 方 法 中 ， 定 位 Activity Indicator View 的 位 置 。 


// 让 inqicator 水 平 居中 


indicator.center.x = tableView.center.x 


33.3 ”实现 FeedVC 控 制 器 表格 视图 相关 代码 


接 下 来 ， 我 们 需要 实现 与 表格 视图 相关 的 协议 方法 。 
步骤 1 从 PostVC 类 中 复制 tableView(_:cellForRowAt:) 方 法 到 FeedVC 类 中 ， 因 为 这 两 个 控制 器 的 表格 视图 完全 一 样 ， 所 以 代码 直接 粘贴 使 用 ， 不 用 做 任何 修改 。 


步骤 2 再 从 PostVC 类 中 复制 usernameBtn clicked( :)、commentBtn clicked( :)、moreBtn_dlicked( :) 和 alert(errormessage:) 方 法 到 FeedVC 类 中 。 


步骤 3 ”在 PostVC 类 的 viewDidLoad() 方 法 中 ， 将 backBtn 进 行 同样 的 修改 。 


(S 


IBAction func usernameBtn clicked( sender: AnyObject) { 

// 按钮 的 index 

let i = sender.layer.value(forKey: "index") as! IndexPath 

// 通过 i 获取 到 用 户 所 单 击 的 单元 格 

let cell = tableView.cellForRow(at: i) as! PostCell 

// 如 果 当 前 用 户 单 击 的 是 自己 的 username， 则 调用 HomeVC， 否 则 是 GuestVC 

if cell.usernameBtn.titleLabel?.text == AVUser.current().username { 

let home = self.storyboard?.instantiateViewController(withIdentifier: "HomeVC") as! HomeVC 
self.navigationController?.pushViewController (home, animated: true) 


let query = AVUser.query() 

query?.whereKey("username", equalTo: cell.usernameBtn.titleLabel?.text) 

query?.findObjectsInBackground(( (objects:[Any]?, error:Error?) in 

if let object = objects?.last 
guestArray.append(object as! AVUser) 
let guest = self.storyboard?.instantiateViewController (withldentifier: "GuestVC") as! GuestVC 
self.navigationController?.pushViewController (guest, animated: true) 


在 该 方法 中 ， 我 们 首先 获取 到 用 户 所 单 击 的 usernameBtn 控 件 的 单元 格 ， 然 后 根据 usernameBtn 判 断 是 否 为 当前 用 户 ， 是 则 进入 HomeVC 控 制 器 。 如 果 不 是 则 获取 到 这 个 用 户 的 AVUser 对 象 ， 并 将 其 
压 到 guestArray 数 组 之 中 ， 便 于 进入 GuestVC 控 制 器 的 时 候 呈 现 该 用 户 的 信息 。 


步骤 4 将 Xcode 切 换 到 助手 编辑 器 模式 ， 在 故事 板 中 创建 FeedVC 视 图 中 各 个 按钮 控件 与 FeedVC 类 中 方法 的 Action 关 联 。 其 中 usernameBtn 关 联 usernameBtn_clicked( :) 方 法 ，commentBtn 关 联 
commentBtn clicked( :) 方 法 ，moreBtn 关 联 moreBtn_clicked( :)， 如 图 33-7 所 示 。 


构建 并 运行 项 目 ， 此 时 在 FeedVC 控 制 器 视图 上 ， 我 们 可 以 通过 上 下 划 动 手势 浏览 当前 用 户 以 及 他 所 关注 的 人 的 帖子 ， 效 果 如 图 33-8 所 示 。 如 果 在 FeedVC 视 图 中 单 击 @mention、#hashtag、 评 论 ， 
也 可 以 进入 到 相应 的 功能 控制 器 。 如 果 单 击 more 按 钮 ， 会 根据 不 同 的 情况 显示 删除 或 投诉 选项 。 
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|® Fitter " KJ Viewas/iPhone 6s («C nR) 一 100% + 
< > (Automatic? = FeedVC.swift » [T] usernameBti_clickedL:) 


; 蛋 HIIUI; | Ja; [-2-4-T- [4 [ F: à 

let alert = UIAlertController{titlė: error, message: message, preferredStyle: .alert) 
let ok = UlAlertAction(title: "OK/, style: .cancel, handler: nil) 

alert.addAction(ok| 

self.present(alert, animated: tryue, completion: nil) 


} | 
$ | QIBAction func usernameBtn clicKed( sender: AnyObject) 1 


// 按钮 的 index 

let i = sender.layer.value(forKey: "index") as! IndexPath 

// 通过 i 获取 到 用 户 所 点 击 的 单元 格 

let cell = tableView.cellForRow(at: i) asl PostCell 

// 如 果 当 前 用 户 点 击 的 是 自己 的 username， 则 调用 HomeVC， 理 则 是 GuestVC 

if cell.usernameBtn.titleLabel?.text == AVUser.current().username 1 
let home = self.storyboard?.instantiateViewController(withIdentifier: "HomeVC") as! HomeVC 
self.navigationController?.pushViewController(home, animated: true) 

jelse { 
let guest - self.storyboard?.instantiateViewController(withIdentifier: "GuestVC") as! GuestVC 
self.navigationController?.pushViewController(guest, animated: true) 


图 33-7 为 三 个 按钮 设置 Action 关 联 


步骤 5 在 HashtagsVC 类 中 ， 将 viewDidLoad() 方 法 中 backBtn 的 初始 化 代码 修改 为 : 


let backBtn = UIBarButtonItem(image: UIImage (named: "back.png"), style: .plain, target: self, action: #selector (pacKk( :))) 


按照 现在 程序 逻辑 ， 当 用 户 上 传 照片 以 后 ， 会 跳 转 到 Tab Bar 控 制 器 的 首 个 子 控制 器 。 当 前 的 首 个 子 控制 器 已 经 是 FeedVC 了 ， 而 不 是 之 前 的 HomeVC 控 制 器 。 所 以 当 用 户 在 UploadVC 中 完成 帖子 的 上 
传 ， 在 发 出 uploaded 通 知 信息 以 后 ， 应 该 在 FeedVC 类 中 接收 该 消息 ， 而 不 需要 在 HomeVC 中 接收 了 。 
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图 33-8 聚合 页 面 的 按钮 交互 


步骤 6 将 HomeVC 类 viewDidLoad(0 中 下 面 的 代码 剪 切 到 FeedVC 类 的 viewDidLoad() 方 法 中 。 


// 从 UploadVC 类 接收 Notification 
NotificationCenter.default.addObserver(self, selector: #selector (uploaded (notification:)), name: NSNotification.Name (rawValue: "uploaded") , object: nil) 


步骤 7 将 HomeVC 类 的 uploaded(notification:) 方 法 剪 切 到 FeedVC 类 中 。 


// 在 接收 到 Uploaded 通 知 后 重新 载 入 posts 
func uploaded (notification: Notification) { 
loadPosts () 


e 


步骤 8 将 PostVC 类 的 viewDidLoad() 方 法 中 下 面 的 代码 复制 到 FeedVC 类 的 viewDidLoad() 方 法 中 ， 并 且 将 PostVC 类 中 的 refresh() 方 法 也 复制 到 FeedVC 类 中 。 


override func viewDidLoad() { 


NotificationCenter.default.addObserver(self, selector: #selector (refresh), name: NSNotification.Name(rawValue: "liked"), object: nil) 


I 


func refresh() { 
self.tableView.reloadData () 


} 


构建 并 运行 项 目 ， 当 用 户 单 击 喜 爱 按钮 或 者 双击 照片 以 后 ， 程 序 会 刷新 表格 视图 。 


33.4 ”设置 Feed 页 面 的 lcon 


N 


步骤 1 从 资源 文件 夹 中 拖 岛 feed.png、feed@2x.png 和 feed@3x.png 到 项 目的 tabbar items 组 中 。 


pis 


步骤 2 在 故事 板 中 选中 包含 FeedVC 的 那个 导航 控制 器 的 标签 ， 在 Attributes Inspector 中 将 Title 设 置 为 聚合 ， 将 Image 设 置 为 feed.png， 如 图 33-9 所 示 。 


图 33-9 ”设置 Tab Bat 的 Item 属 性 
步骤 3 ”在 故事 板 中 将 Tab Bar Controller 中 的 上 传 item 调 整 到 第 二 的 位 置 ， 使 得 items 的 顺序 为 : 聚合 、 上 传 和 我 的 。 


构建 并 运行 项 目 ， 效 果 如 图 33-10 所 示 。 


本 章 我 们 实现 了 Instagram 的 聚合 控制 器 页 面 ， 逻 辑 实现 并 不 是 很 复杂 
要 借 此 机 会 再 次 巩固 实现 该 功能 的 代码 是 如 何 编写 的 ， 以 及 为 什么 这 样 编写 。 
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图 33-10 Tab Batr 的 三 个 不 同 标 签 


， 只 不 过 需要 我 们 在 不 同 的 控制 器 类 中 进行 代码 和 方法 的 复制 、 粘 贴 ， 从 而 快速 实现 相关 的 功能 


在 故事 板 中 ， 从 对 象 库 拖 忠 1 个 Table View Controller 到 编辑 区 域 中 。 菜 单 中 选择 Editor 一 Embed In 一 Navigation Controller, 


制 器 。 将 该 控制 器 的 Item 移动 到 聚合 Icon 的 后 面 ， 也 就 是 左 数 第 二 个 位 置 ， 如 图 34-1 所 示 。 
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。 在 粘贴 代码 的 过 程 中 ， 请 一 定 


上 又 2 ” 按 住 Control 键 从 Tab Bar Controller 拖 暇 鼠标 到 新 创建 的 Navigation Controller， 在 弹出 的 对 话 框 中 选择 Relationship Segue View Controllers。 此 时 ， 我 们 为 标签 控制 器 添加 了 第 4 个 子 控 
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图 34-1 ”为 Tab Bat 控 制 器 创建 第 四 个 子 视图 


步骤 3 ”从 大 纲 视 图 中 选中 新 创建 的 Table View Cell， 在 Size Inspector 中 将 Row Height 设 置 为 80， 如 图 34-2 所 示 。 


步骤 4 MIRER Amage View 到 单元 格 视图 中 ， 在 Size Inspector 中 将 x 和 y 均 设置 为 10，width 和 height 均 设置 为 60， 在 Attributes Inspector 中 将 Image 设 置 为 pp.jpg。 


BE € > Bhisugam? iui. 2 B — ) B- 2B. ) O T.r) EJ Table view ) E Table View Cell <a> |i 
> Ej Sign UpvC Scene o : 
—— 
P E Reset PasswordVC Scena | 


= E Tab Barve Scene 


sh DOW [FrameRectange — E Rectangle E | 


H E HomevC Scene eo — 

Poma i KL mmc - 
> I UpicedvC Scene Prototype Cells | 

H E GuestVC Scene © 

b 国 EditVC Scene o 


H B PostVC Scene 

H 图 FeedvC Scene 

> 图 CommentVC Scene - m 
P 国 HashtagsVC Scene o 
>» [fll FollowersvC Scene 
» B 我 的 Scene 

b 国 NavVC Scene 

H B Lit scene 

» B RA Scene 


Y E Table View Controller Scene 


v (D) Table view Controller 
v [— Table View 


0!/0!0!0 


D o0oduu 


@ First Responder 
[8 Exit 


Table View Controller - A 
controller that manages a table view. 


图 34-2 设置 单元 格 的 高 度 为 80 


步骤 5 在 Image View 的 右 侧 添 加 1 个 Label 和 1 个 Button。 将 Label 的 Title 设 置 为 usernameLbl。 将 Button 的 Background 设 置 为 Light Gray Color， 删 除 Button 中 的 Title， 布 局 效果 如 图 34-3 所 示 。 


图 34-3 ”单元 格 的 最 终 布 局 效果 


此 时 ， 细 心 的 读者 就 会 发 现 ， 当 前 单元 格 中 的 布局 与 之 前 FollowersCell 的 布局 完全 一 致 。 没 错 ! 其 实 ， 我 们 所 呈现 到 屏幕 上 的 搜索 用 户 的 单元 格 内 容 ， 与 之 前 查看 关注 者 的 单元 格 中 的 控件 是 一 样 的 。 
因此 ， 接 下 来 我 们 就 在 当前 的 单元 格 中 复 用 FollowersCell 类 。 


步骤 6 ”在 故事 板 中 选中 新 创建 的 表格 视图 的 单元 格 ， 在 Identity Inspector 中 将 Class 设 置 为 FollowersCell。 将 Xcode 切换 到 助手 编辑 器 模式 ， 为 Image View、Label 和 Button 与 FollowersCell 类 建立 
Outlet 关 联 ， 关 联 对 象 为 avalmg、usernameLbl 和 followBtn。 


Qi 因为 在 FollowersCell 中 已 经 有 了 三 个 Outlet 属 性， 所 以 在 建立 关联 的 时 候 ， 我 们 只 需要 直接 按 住 Conttol 键 ， 从 控件 处 拖 提 鼠标 到 相应 的 类 属性 声明 的 代码 上 即 可 。 


步骤 7 在 项 目 导航 中 创建 新 的 Cocoa Touch Class, Subclass of 设置 为 UITableView-Controller，Class 设 置 为 UsersSVC。 在 故事 板 中 将 新 创建 控制 器 的 Class 和 Storyboard ID 均 设置 为 UsersVC， 如 
图 34-4 所 示 ， 选 中 单元 格 在 Attributes Inspector 中 将 Identifier 设置 为 Cell。 同 时 ， 将 内 腐 UsersVC 控 制 器 的 导航 栏 控制 器 的 Class 设 置 为 NavVC。 


Custom Class 


Class|UsersVC og 


Module | Current - Instagram 


| 


Prototype Cells M — NENNEN 


Restoration ID | — —  — | 


usernameLbl | | C Use Storyboard ID 


User Defined Runtime Attributes 
Key Path Type Value 


图 34-4 设置 表格 视图 控制 器 的 Class 为 UsersVC 


步骤 8 在 UsersVC 类 的 声明 部 分 添加 对 Search Bar 协 议 的 声明 ， 并 添加 必要 的 属性 : 


class UsersVC: UITableViewController, UISearchBarDelegate { 
// 搜索 栏 
Var searchBar = UISearchBar () 
// 从 云端 获取 信息 后 保存 数据 的 数组 
Var usernameArray = [String] () 
var avaArray = [AVFile] () 


因为 要 在 该 控制 器 中 操作 搜索 栏 ， 所 以 需要 添加 UlSearchBarDelegate 协 议 方法 ， 当 用 户 在 搜索 栏 输 入 数据 的 时 候 可 以 通知 UsersVC 类 。 同 时 还 创建 了 两 个 数组 来 存储 用 户 名 和 用 户头 像 。 


步骤 9 在 UsersVC 类 的 viewDidLoad() 方 法 中 添加 下 面 的 代码 : 


override func viewDidLoad() { 
super.viewDidLoad() 
// 实现 Search Bar 功 能 
searchBar.delegate = self 
searchBar.showsCancelButton - true 
searchBar.sizeToFit () 
searchBar.tintColor = UlColor.groupTableViewBackground 
searchBar.frame.size.width = self.view.frame.width - 30 
let searchItem = UIBarButtonItem(customView: searchBar) 
self.navigationlItem.leftBarButtonlItem = searchlItem 


在 viewDidLoad() 方 法 中 ， 设 置 了 searchBar 的 delegate 属 性 为 self， 这 样 在 用 户 与 搜索 栏 交 互 的 时 候 才 能 够 通知 到 当前 的 UsersVC 类 。 显 示 搜 索 栏 的 取消 按钮 ， 设 置 搜索 栏 的 背景 色 和 尺寸 ， 最 后 将 搜 
索 栏 作为 Bar Button Item 的 视图 显示 在 导航 栏 的 左 侧 。 


构建 并 运行 项 目 ， 效 果 如 图 34-5 所 示 。 


图 34-5 ”UsersVC 控 制 器 中 搜索 栏 的 外 观 效 果 


34.2 ”实现 用 户 搜索 功能 


接 下 来 ,我们 将 在 UsersVC 类 中 实现 搜索 用 户 功能 的 代码 。 


步骤 1 在 UsersVC 类 中 添加 loadUsers() 方 法 。 


func loadUsers() { 
let usersQuery = AVUser.query() 
usersQuery?.addDescendingOrder ("createdAt") 
usersQuery?.limit - 20 
usersQuery?.findObjectsInBackground(( (objects:[Any]?, error:Error?) in 
if error == nil { 


// 清空 数组 

self.usernameArray.removeAll(keepingCapacity: false) 

self. avaArray. removeAll(keepingCapacity: false) 

for object in objects! ( 
self.usernameArray.append((object as AnyObject).username) 
self.avaArray.append((object as AnyObject).value(forKey: "ava") as! AVFile) 


// 刷新 表格 视图 


self.tableView.reloadData () 


print (error?.localizedDescription) 


在 该 方法 中 ， 我 们 查询 出 云端 的 _User 数 据 表 中 最 近 注 册 的 前 20 名 用 户 ， 并 把 信息 添加 到 usernameArray 和 avaArray 数 组 中 。 


步骤 2 ”在 viewDidLoad() 方 法 的 最 后 调用 loadUsers() 方 法 。 


override func viewDidLoad() { 
// load users 
loadUsers|() 


} 


步骤 3 在 UsersVC 类 中 添加 searchBar( :shouldChangeTextln:replacementText:) 方 法 。 


func searchBar(  searchBar: UISearchBar, shouldChangeTextIn range: NSRange, replacementText text: String) -> Bool { 


let userQuery = AVUser.query() 

userQuery?.whereKey ("username", matchesRegex: "(?i)" + searchBar.text!) 

userQuery?.findObjectsInBackground(( (objects:[Any]?, error:Error?) in 
if error == nil { 


J 
)) 


return true 


当 用 户 在 搜索 栏 中 输入 的 时 候 会 调用 该 协议 方法 ， 这 里 我 们 通过 正则 表达 式 搜索 云端 User 数 据 表 中 ，username 字 段 中 符合 “(?i)+searchBar.text” 的 内 容 。 


步骤 4 在 if error==nil{} 语 句 中 继续 添加 代码 : 


E: 


f objects!.isEmpty { 


let fullnameQuery = AVUser.query() 

fullnameQuery?.whereKey("fullname", matchesRegex: "(?i)" + searchBar.text!) 

fullnameQuery?.findObjectsInBackground(( (objects:[Any]?, error:Error?) in 
if error == nil { 


// 清空 数组 


self.usernameArray.removeAll(keepingCapacity: false) 
self.avaArray.removeAll(keepingCapacity: false) 
// 查找 相关 数据 
for object in objects! { 
self.usernameArray.append((object as AnyObject).username) 
self.avaArray.append((object as AnyObject).value(forKey: "ava") as! AVFile) 


} 


self.tableView.reloadData () 
} 
}) 
}else 4 
/ / T 青空 数组 


sel f.usernameArray.removeAll (keepingCapacity: false) 


F.avaArray.removeAll(keepingCapacity: false) 
/ / 查找 相关 数据 
for object in objects! ( 
self.usernameArray.append((object as AnyObject).username) 


self.avaArray.append((object as AnyObject).value(forKey: "ava") as! AVFile) 


.ctableView.reloadData () 


在 上 面 的 代码 中 ， 如 果 从 username 字 段 中 搜索 到 了 指定 的 内 容 则 将 信息 压 入 数组 ， 如 果 没 有 搜索 到 ， 则 从 fullname 字 段 中 继续 搜索 ， 并 将 信息 压 入 到 数组 之 中 。 


步骤 5 在 UsersVC 类 中 添加 searchBarTextDidBeginEditing( :) 和 searchBarCancelButton-Clicked( :) 方 法 。 


func searchBarTextDidBeginEditing(  searchBar: UlISearchBar) { 
searchBar.showsCancelButton - true 


} 
func searchBarCancelButtonClicked(  searchBar: UlSearchBar) { 
searchBar.resignFirstResponder () 
searchBar.showsCancelButton - false 

searchBar.text = "" 

loadUsers () 


当 用 户 单 击 Cancel 按 钮 的 时 候 会 调用 searchBarCancelButtonClicked( ;) 方 法 ， 该 方法 会 让 键盘 消失 ， 搜 索 栏 的 Cancel 按 钮 消失 ， 将 搜索 栏 中 的 文字 清空 ， 并 且 重 新 载 入 默认 搜索 用 户 。 


当 用 户 开始 在 搜索 栏 中 输入 文字 的 时 候 ， 会 调用 searchBarTextDidBeginEditing( :) 方 法 ， 让 Cancel 按 钮 呈现 到 搜索 栏 上 。 


34.3 ”在 表格 视图 中 显示 搜索 结果 


接 下 来 ， 我 们 需要 配置 表格 视图 来 显示 搜索 到 的 结果 。 
步骤 1 删除 UsersVC 类 中 的 numberOfSections(in:) 方 法 ， 这 样 表 格 视图 默认 的 section 就 是 1 


步骤 2 设置 tableView( :numberOfRowslnSection:) 方 法 的 返回 值 为 usernameArray 数 组 的 个 数 。 


override func tableView( tableView: UITableView, numberOfRowsInSection section: Int) -> Int { 
return usernameArray.count 


} 


步骤 3 添加 tableView(_:heightForRowAt:) 方 法 设置 单元 格 的 高 度 为 屏幕 宽度 的 四 分 之 一 。 


override func tableView(  tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat { 
return self.view.frame.width / 4 


} 


步骤 4  frtableView( :cellForRowAt:) 方 法 中 ， 添 加 下 面 的 代码 : 


override func tableView( tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { 
let cell = tableView.dequeueReusableCell(withlIdentifier: "Cell", for: indexPath) as! FollowersCell 
// 隐藏 followBtn 按钮 
cell.followBtn.isHidden = true 
cell.usernamelbl.text = usernameArray [indexPath.row] 


avaArray[indexPath.row].getDataInBackground { (data:Data?, error:Error?) in 

if error == nil { 
cell.avalmg.image = UIImage (data: data!) 
} 

} 


return cell 


在 获取 到 表格 视图 单元 格 以 后 ， 让 follow 按 钮 隐藏 ， 因 为 在 UsersVC 中 我 们 并 不 需要 这 个 按钮 ， 但 又 不 能 将 之 删除 。 然 后 将 用 户 名 赋值 给 usernameLbl， 将 用 户头 像 赋值 给 aval mg 的 image 属 性 。 


步骤 5 在 UsersVC 类 中 添加 tableView( :didSelectRowAt:) 方 法 。 


override func tableView( tableView: UITableView, didSelectRowAt indexPath: IndexPath) { 
// 获取 当前 用 户 选 择 的 单元 格 对 象 


let ce — tableView.cellForRow(at: indexPath) as! FollowersCell 
if cell.usernamelbl.text == AVUser.current().username { 
let home = self .Storyboard?. instantiateViewController (withIdentifier: "HomeVC") as! HomeVC 


self.navigationController?.pushViewController (home, animated: true) 

Jelse ( 

let query = AVUser.query() 

query?.whereKey("username", equalTo: cell.usernamelbl.text) 

query?.findObjectsInBackground(( (objects:[Any]?, error:Error?) in 

if let object = objects?.last ( 
questArray. append (object as! AVUser) 
let guest = self.storyboard?.instantiateViewController (withldentifier: "GuestVC") as! GuestVC 
self.navigationController?.pushViewController (guest, animated: true) 


在 该 方法 中 ， 获 取 到 当前 用 户 所 选择 的 单元 格 ， 如 果 选 择 的 单元 格 用 户 为 当前 用 户 则 进入 HomeVC 控 制 器 ， 否 则 进入 GuestVC 控 制 器 。 


步骤 6 在 故事 板 中 选中 UsersVC 的 表格 视图 ， 在 Attributes Inspector 中 将 Separator 设 置 为 None。 再 选中 单元 格 ， 在 Attributes Inspector 中 将 Selection 设 置 为 None。 


构建 并 运行 项 目 ， 当 切换 到 搜索 控制 器 以 后 ， 会 显示 最 新 的 20 位 注册 用 户 ， 如 果 在 搜索 栏 中 输入 信息 ， 则 会 显示 指定 用 户 的 资料 ， 效 果 如 图 34-6 所 示 。 
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图 34-6 ”通过 搜索 栏 显示 用 户 信息 
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从 资源 文件 夹 中 拖 岛 users.png、users@2x.png 和 users@3x.png 到 项 目的 tabbar-items 组 中 。 
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在 故事 板 中 选中 包含 UsersVC 的 那个 导航 控制 器 的 标签 ， 在 Attributes Inspector 中 将 Title 设 置 为 搜索 ， 将 Image 设 置 为 users.png， 如 图 34-7 所 示 。 


设置 Tab Bar 的 Item 属 性 
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图 34-7 


项 目 ， 效 果 如 图 34-8 所 示 。 
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图 34-8 Tab Bar 的 四 个 不 同 标签 


除了 在 UsersVC 控 制 器 中 可 以 搜索 用 户 以 外 ， 我 们 还 需要 在 该 控制 器 中 实现 照片 的 浏览 功能 。 这 需要 借助 集合 视图 ， 也 就 是 说 需要 在 UlTable-ViewController 中 在 添加 一 个 Collection View, 


在 之 前 的 实战 中 ， 我 们 都 是 在 相应 的 控制 器 中 实现 相应 的 视图 : 在 UITableViewController 中 实现 Table View, 或 者 是 在 UlCollectionViewController 中 实现 Collection View。 但 是 本 节 中 我 们 除了 需 
要 在 UlTableViewController 中 实现 Table View 的 功能 ， 还 要 实现 Collection View 的 功能 。 我 们 要 做 的 就 是 : 在 默认 情况 下 ， 集 合 视图 会 显示 在 屏幕 上 ， 当 用 户 单 击 搜索 栏 输入 欲 查找 的 用 户 名 后 则 会 显示 
Table View。 


为 UsersVC 类 中 添加 下 面 几 个 属性 : 


uu) 


// 集合 视图 UI 
var collectionView: UICollectionView! 
// 存储 云端 数据 的 数组 

var picArray = [AVFile] () 

var puuidArray = [String] () 

var page: Int = 24 


我 们 通过 代码 的 方式 创建 集合 视图 ， 并 且 创 建 两 个 数组 分 别 存储 从 云端 获取 的 帖子 照片 和 帖子 的 puuid， 分 页 设置 为 24。 
Qiz 下 我们 并 没有 在 故事 板 中 创建 集合 视图 对 象 ， 这 是 因为 表格 视图 与 集合 视图 的 位 置 是 上 下 遮盖 的 关系 ， 如 果 在 故事 板 中 设置 集合 视图 的 话 ， 对 于 大 小 、 位 置 的 调整 及 属性 的 设置 是 非常 麻烦 的 。 


步骤 2 为 UsersVC 类 添加 集合 视图 相关 的 协议 声明 ， 并 在 UsersVC 类 中 添加 collec-tionViewLaunch0 方 法 。 


class UsersVC: UITableViewController, UISearchBarDelegate, UICollectionViewDelegate, UlCollectionViewDataSource, UlCollectionViewDelegateFlowLayout { 
// 集合 视图 相关 方法 
func collectionViewLaunch() { 
// 集合 视图 的 布局 
let layout = UICollectionViewFlowLayout () 
// 定义 item 的 尺寸 
layout.itemSize = CGSize(width: self.view.frame.width / 3, height: self.view.frame.width / 3) 
// 设置 滚动 方向 
layout.scrollDirection = .vertical 
// 定义 滚动 视图 在 视图 中 的 位 置 
let frame = CGRect(x: 0, y: 0, width: self.view.frame.width, height: self.view.frame.height - self.tabBarController!.tabBar.frame.height - self.navigationController!.navige 
// 实例 化 滚动 视图 
collectionView = UICollectionView (frame: frame, collectionViewLayout: layout) 
collectionView.delegate = self 
collectionView.dataSource = self 
collectionView.alwaysBounceVertical = true 
collectionView.backgroundColor = .white 
self.view.addSubview (collectionView) 


在 上 面 的 代码 中 ， 首 先 需要 在 UsersVC 中 声明 三 个 与 集合 视图 相关 的 协议 。 


然后 创建 一 个 collectionViewLaunch() 方 法 ， 该 方法 在 启动 集合 视图 的 时 候 会 被 手动 执行 。 在 该 方法 中 ， 我 们 首先 创建 了 一 个 UICollectionViewFlowLayout 类 型 的 对 象 ， 该 对 象 用 于 管理 和 组 织 每 个 
section 中 的 tem， 也 就 相当 于 表格 视图 中 的 单元 格 ， 只 不 过 在 集合 视图 中 可 以 针对 不 同位 置 的 Item 设 置 不 同 的 大 小 尺寸 。 这 里 我 们 设置 所 有 的 Item 的 大 小 为 三 分 之 一 的 视图 宽度 。 


接着 ， 我 们 将 集合 视图 设置 为 只 允许 垂直 滚动 。 然 后 设置 集合 视图 的 大 小 和 位 置 ， 需 要 注意 的 是 ， 集 合 视图 的 高 度 是 控制 器 视图 的 高 度 减 去 标签 栏 和 导航 栏 的 高 度 后 再 减 去 20。 


[3 


之 后 ， 便 可 以 使 用 设置 好 的 位 置 和 布局 创建 集合 视图 了 ， 并 且 指 定 当前 控制 器 为 集合 视图 的 delegate 和 dataSource 对 象 。 设 置 了 集合 视图 在 垂直 滚动 时 有 指示 条 以 及 背景 色 为 白色 ， 最 后 将 该 集合 视 医 
添加 到 控制 器 的 视图 中 。 


步骤 3 在 collectionViewLaunch() 方 法 中 继续 添加 代码 : 


// 定义 集合 视图 中 的 单元 格 
collectionView.register (UICollectionViewCell.self, forCellWithReuseIdentifier: "Cell") 


使 用 register( :forCellWithReuseldentifier:) 方 法 可 以 为 集合 视图 的 Cell 注 册 一 个 类 ， 在 使 用 dedqueueReusableCell(withReuseldentifierfor) 方 法 之 前 必须 调用 集合 视图 对 象 的 这 个 方法 ， 因 为 只 有 这 
样 才能 创建 一 个 给 定 类 型 的 Cell 对 象 ， 如 果 在 集合 视图 的 可 复 用 队列 中 不 存在 该 类 型 的 Cell 对 象 ， 则 会 用 register(_:forCellWithReuseldentifier:) 方 法 提供 的 信息 自动 创建 一 个 新 的 Cell 对 象 。 其 中 register 方 
法 中 的 第 一 个 参数 是 集合 视图 中 所 用 到 的 Cell 类 ， 注 意 这 里 需要 使 用 UlCollectionViewCell.self 来 指定 这 个 类 ， 第 二 个 参数 则 是 生成 的 Cell 的 ldentifier 标 识 。 


er 在 UsetsVC 中 ， 虽 然 表 格 视 图 单元 格 的 Identifier 和 集合 视图 单元 格 的 Identifiet 都 是 Cell， 但 是 由 于 它们 处 于 不 同 的 视图 (UITableView 和 UICollectionView) 之 中 ， 所 以 它们 之 间 不 会 有 冲突 。 


步骤 4 在 UsersVC 类 中 添加 下 面 两 个 方法 。 


// 设置 每 个 Section 中 行 之 间 的 间隔 
func collectionView(  collectionView: UlCollectionView, layout collectionViewLayout: UlCollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat { 
return 0 


) 

// 设置 每 个 Section 中 item 的 间隔 

func collectionView( collectionView: UICollectionView, layout collectionViewLayout: UlCollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat { 
return 0 


} 


collectionView( :layout:minimumLineSpacingForSectionAt:) 方 法 用 于 指定 每 个 Section 中 连续 的 行 之 间 的 行 间 距 。 如 果 不 实现 该 方法 的 话 ， 系 统 布 局 则 会 使 用 minimumLineSpacing 属 性 值 来 代 


B, 我们 实现 这 个 方法 是 为 了 让 集合 视图 中 行 之 间 的 间隔 为 0。 


~ 


collectionView( :layout:minimumlnteritemSpacingForSectionAt:) 方 法 用 于 指定 每 个 Section 中 一 行 里 面 的 Cell 的 间隔 为 0。 


步骤 5 ”在 UsersVC 类 中 添加 下 面 的 方法 ， 告 诉 集合 视图 有 几 个 单元 格 。 


// 确定 集合 视图 中 Items 的 数量 
func collectionView(  collectionView: UlCollectionView, numberOfltemsInSection section: Int) -> Int { 
return picArray.count 


} 


步骤 6 在 UsersVC 类 中 添加 下 面 的 方法 生成 集合 视图 需要 的 单元 格 。 


func collectionView(  collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell ( 
let cell = collectionView.dequeueReusableCell (withReuseldentifier: "Cell", for: indexPath) 

let piclImg = UIImageView (frame: CGRect(x: 0, y: 0, width: cell.frame.width, height: cell.frame.height)) 
cell.addSubview (piclImg) 
picArray[indexPath.row].getDataInBackground ( (data:Data?, error:Error?) in 


if error == nil { 

picimg.image = UIImage (data: data!) 
Jelse ( 

print (error?.localizedDescription) 


} 
} 


return cell 


单元 格 中 的 Image View 控 件 是 通过 代码 生成 的 ， 它 的 大 小 占据 了 整个 单元 格 ， 并 且 通 过 AVFile 类 的 getDatalnBackground() 方 法 将 照片 显示 到 单元 格 中 。 


步骤 7 在 UsersVC 类 中 添加 下 面 的 方法 ， 当 用 户 单 击 后 会 进入 到 相应 的 帖子 页 面 。 


// 当 用 户 单 击 单元 格 时 …… 

func collectionView( collectionView: UlCollectionView, didSelectItemAt indexPath: IndexPath) { 
// 从 uuidArray 数 组 获取 到 当前 所 单 击 的 帖子 的 uuid， 并 压 入 到 全 局 数组 postuuid 中 
postuuid.append (puuidArray[indexPath.row]) 
// 呈现 PostVC 控 制 器 
let post = self.storyboard?.instantiateViewController (withIdentifier: "PostVC") as! PostVC 
self.navigationController?.pushViewController (post, animated: true) 


ky 


步骤 8 在 UsersVC 类 中 添加 下 面 的 方法 ， 载 入 云端 用 户 所 发 布 的 帖子 。 


func loadPosts() { 
let query = AVQuery(className: "Posts") 
query?.limit = page 
query?.findObjectsInBackground(( (objects:[Any]?, error:Error?) in 
if error == nil ( 
// 清空 数组 
self.picArray.removeAll(keepingCapacity: false) 
self.puuidArray.removeAll(keepingCapacity: false) 
// 获取 相关 数据 
for object in objects! { 
self.picArray.append((object as AnyObject).value(forKey: "pic") as! AVFile) 
self.puuidArray.append((object as AnyObject).value(forKey: "puuid") as! String) 
} 
self.collectionView.reloadData () 
jelse { 
print (error?.localizedDescription) 
} 
}) 


} 


在 loadPosts() 方 法 中 ， 我 们 获取 的 是 云端 Posts 数 据 表 中 的 所 有 帖子 数据 ， 并 且 将 信息 人 存储 到 相关 的 两 个 数组 中 。 


步骤 9 ”继续 在 UsersVC 类 中 添加 下 面 的 方法 。 


override func scrollViewDidScroll( scrollView: UIScrollView) { 
if scrollView.contentOffset.y >= scrollView.contentSize.height / 6 ( 
self.loadMore|() 


} 
} 


当 用 户 拖 折 集合 视图 的 偏 移 量 大 于 集合 视图 内 容 高 度 的 六 分 之 一 ， 则 执行 loadMore() 方 法 。 


步骤 10 ”在 UsersVC 类 中 实现 loadMore() 方 法 。 


func loadMore() { 
// 如 果 有 更 多 的 帖子 需要 载 入 
if page <= picArray.count { 
// 增加 page 的 数量 
page = page + 24 
// 载 入 更 多 的 帖子 
let query = AVQuery (className: "Posts") 
query?.limit = page 
query?.findObjectsInBackground(( (objects:[Any]?, error:Error?) in 
if error == nil { 
// 清空 数组 
self.picArray.removeAll(keepingCapacity: false) 
self.puuidArray.removeAll(keepingCapacity: false) 
// 获取 相关 数据 
for object in objects! { 
self.picArray.append((object as AnyObject).value(forKey: "pic") as! AVFile) 
self.puuidArray.append((object as AnyObject).value(forKey: "puuid") as! String) 
) 
self.collectionView.reloadData () 
Jelse ( 
print (error?.localizedDescription) 


该 方法 与 oadPosts() 方 法 类 似 ， 当 用 户 滚动 集合 视图 的 时 候 会 通过 该 方法 载 入 更 多 的 帖子 照片 。 


步骤 11 修改 searchBarTextDidBeginEditing( :) 和 searchBarCancelButtonClicked( :) 方 法 。 


func searchBarTextDidBeginEditing(  searchBar: UISearchBar) { 
// 当 开始 搜索 的 时 候 ， 隐 藏 集合 视图 
collectionView.isHidden = true 


func searchBarCancelButtonClicked(  searchBar: UISearchBar) { 
// 当 搜索 结束 后 显示 集合 视图 
collectionView.isHidden = false 


当 用 户 单 击 搜索 栏 开始 搜索 用 户 的 时 候 ， 会 隐藏 集合 视图 ， 屏 幕 上 将 显示 表格 视图 。 当 用 户 单 击 搜索 栏 的 Cancel 按 钮 后 ， 集 合 视图 出 现 ， 显 示 帖 子 照 片 。 


步骤 12 ”修改 viewDidLoad() 方 法 和 collectionViewLaunch() 方 法 。 


override func viewDidLoad() ( 


// 启动 集合 视图 
collectionViewLaunch() 


func collectionViewLaunch() { 


// 载 入 帖子 
loadPosts () 
} 


在 UsersVC 控 制 器 的 视图 载 入 完成 后 启动 集合 视 


IRI 


， 在 集合 视图 启动 最 后 载 入 帖子 。 


构建 并 运行 项 目 ， 当 切换 到 搜索 控制 器 以 后 会 显示 所 有 帖子 照片 的 集合 视图 ， 如 果 单 击 搜索 栏 的 话 ， 则 会 看 到 用 户 列 表 的 表格 视图 ， 如 图 34-9 所 示 。 
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图 34-9 ”集合 视图 和 表格 视图 之 间 的 切换 


最 后 ， 我 们 为 集合 视图 添加 一 个 下 拉 刷 新 的 功能 ， 在 用 户 下 拉 刷 新 以 后 可 能 会 显示 出 其 他 用 户 上 传 的 最 新 照片 帖子 。 
步骤 13 ”在 collectionViewLaunch() 方 法 中 添加 下 面 的 代码 : 


当 用 户 下 拉 刷 新 集合 视图 的 时 候 ， 会 调用 loadPosts() 方 法 重新 从 云端 载 入 帖子 照片 数据 。 


N EH 


本 章 我 们 实现 了 Instagram 的 搜索 功能 ， 首 先是 在 导航 栏 中 实现 了 搜索 栏 ， 通 过 Ul-SearchBarDelegate 协 议 获 取 用 户 所 要 搜索 的 数据 ， 然 后 再 通过 LeanCloud API 进 行 相关 查询 。 在 UsersVC 类 中 ， 我 
们 不 仅 实 现 了 表格 视图 的 显示 ， 还 实现 了 集合 视图 的 数据 显示 。 


第 35 草 创建 通知 控制 器 界面 
从 本 章 开始 ， 我 们 将 创建 Instagram 应 用 的 最 后 一 个 控制 器 ， 该 控制 器 用 于 向 用 户 显示 各 种 消息 通知 ， 包 括 @mention、 删 除 、 评 论 、 关 注 等 事件 。 首 先 让 我 们 从 搭建 控制 器 的 用 户 界面 开始 。 


搭建 通知 控制 器 的 用 


EUR 与 创建 聚合 控制 器 类 似 ， 在 故事 板 中 从 对 象 库 拖 蝶 1 个 新 的 Table View Controller 到 编辑 区 域 ， 选 中 该 表格 控制 器 ， 在 菜单 中 选择 Editor 一 Embed In 一 Navigation Controller。 选 中 新 创建 的 


导航 控制 器 ， 在 Identity Inspector 中 将 Class 设 置 为 NavVC。 


又 2 按 住 Control 键 ， 从 Tab Bar Controller 拖 忠 鼠 标 到 新 创建 的 导航 控制 器 ， 在 弹出 的 面板 中 选择 Relationship Segue 一 view controllers。 在 Tab Bar Controller 中 将 新 创建 的 ltem 的 位 置 调整 到 


我 的 Icon 的 前 面 ， 如 图 35-1 所 示 。 


图 35-1 调整 标签 栏 中 Item 的 位 置 


步骤 3 ”从 对 象 库 中 拖 忠 1 个 Image View 到 新 创建 的 表格 视图 的 单元 格 之 中 ， 在 Size Inspector 中 将 x 设 置 为 10，y 设 置 为 5，width 和 height 均 设置 为 20， 如 图 35-2 所 示 。 在 Attributes Inspector 中 将 
Imageiz &7Jpp jpg. 


IRA ”从 对 象 库 抱 钨 1 个 Button 到 Image View 的 右 侧 ， 在 Size Inspector 中 将 x 设 置 为 50，y 设 置 为 5，width 设 置 为 90，height 设 置 为 30。 在 Attributes Inspector 中 将 Title 设 置 为 usernameBtn， 将 
字号 设置 为 13， 如 图 35-3 所 示 。 
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图 35-2 设置 Image View 的 属性 
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图 35-3 ”设置 Button 的 属性 
步骤 5 ”从 对 象 库 拖 忠 1 个 Label 到 Button 的 右 侧 ， 在 Attributes Inspector 中 设置 text 为 infoLbl， 字 号 设置 为 13。 在 Size Inspector 中 将 x 设置 为 150，y 设 置 为 5，width 设 置 为 150，height 设 置 为 30。 


步骤 6 ”再 拖 蜗 1 个 Label 到 单元 格 的 右 端 ， 字 号 设置 为 13， 颜 色 为 Light Gray Color，text 设 置 为 365d。 在 Size Inspector 中 将 y 设 置 为 5;，height 设 置 为 30， 效 果 如 图 35-4 所 示 。 


图 35-4 设置 Label 的 属性 


步骤 7 在 项 目 导 航 中 创建 一 个 新 的 Cocoa Touch Class 文 件 ，Subclass of 为 UITableView-Controller，Class 设 置 为 NewsVC。 再 创建 一 个 Cocoa Touch Class 文 件 ，Subclass of 为 UITable 
ViewCell，Class 设 置 为 NewsCell。 


步骤 8 ”在 故事 板 中 ， 选 中 新 创建 的 表格 视图 控制 器 ， 在 ldentity Inspector 中 将 Class 设 置 为 NewsVC，Storyboard ID 也 设置 为 NewsVC。 选 中 表格 视图 ， 在 Attributes Inspector 中 将 Separator 设 置 
为 None。 选 中 表格 视图 中 的 单元 格 ， 在 ldentity Inspector 中 将 Class 设 置 为 NewsCell， 在 Attributes Inspector 中 将 Identifier 设置 为 Cell， 将 Selection 设 置 为 None。 


步骤 9 ”将 Xcode 切换 到 助手 编辑 器 模式 ， 将 单元 格 中 的 Image View，Button 和 2 个 Label 与 NewsCell 类 建立 Outlet 关 联 。 


// UI objects 

@IBOutlet weak var avalmg: UIImageView! 
QIBOutlet weak var usernameBtn: UlButton! 
QIBOutlet weak var infoLbl: UILabel! 
QIBOutlet weak var dateLbl: UILabel! 


35.2 ”设置 通知 页 面 的 lcon 


步骤 1 从 资源 文件 夹 中 拖 咏 news.png、news@2x.png 和 news@3x.png 到 项 目的 tabbar items 组 中 。 


步骤 2 在 故事 板 中 选中 包含 NewsVC 的 那个 导航 控制 器 的 标签 ， 在 Attributes Inspector 中 将 Title 设 置 为 通知 ， 将 lImage 设 置 为 news.png， 如 图 35-5 所 示 。 


图 35-5 ”设置 标签 栏 中 通知 的 Icon 


构建 并 运行 项 目 ， 效 果 如 图 35-6 所 示 。 
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图 35-6 ”标签 栏 中 的 5 个 Item 


35.3 评论 或 @mention 的 通知 处 理 


当 用 户 在 发 布 评论 或 评论 中 包含 @mention 的 时 候 ， 需 要 发 送 通知 给 相关 的 用 户 。 


步骤 1 在 CommentVC 类 中 的 sendBtn_clicked( :) 方 法 中 ， 在 STEP 3. 发 送 hashtag 到 云端 代码 的 后 面 ， 添 加 下 面 的 代码 : 


// STEP 4. 当 过 到 mention 发 送 通知 
for var word in words { 
if word.hasPrefix("Q") ( 
word = word.trimmingCharacters (in: CharacterSet. 
punctuationCharacters) 
word = word.trimmingCharacters (in: CharacterSet. 


symbols) 
let newsObj = AVObject(className: "News") 
newsObj?["by"] = AVUser.current ().username 
newsObj?["ava"] = AVUser.current().object(forKey: "ava") as! AVFile 
newsObj?["to"] = word 
newsObj?["owner"] = commentowner.last 
newsObj?["puuid"] = commentuuid.last 
newsObj?["type"] = "mention" 
newsObj?["checked"] = "no" 
newsObj?.saveEventually () 


在 上 面 的 代码 中 ， 我 们 分 析出 mention 的 用 户 ， 然 后 将 相关 信息 发 送 到 云端 的 News 数 据 表 中 。 其 中 by 代表 发 起 通知 的 人 ，ava 代 表 发 起 人 的 头像 ，to 是 收 到 通知 的 人 ，owner 是 评论 的 拥有 者 ，type 代 
表 该 通知 到 类 型 ，checked 代 表 接 收 者 是 否 查阅 了 通知 。 


步骤 2 在 STEP 4. 当 遇 到 @mention 发 送 通知 代码 的 下 面 ， 继 续 添加 代码 : 


// STEP 5. 发 送 评论 时 候 的 通知 


if commentowner.last != AVUser.current().username { 
let newsObj = AVObject(className: "News") 
newsObj?["by"] = AVUser.current ().username 
newsObj?["ava"] = AVUser.current().object(forKey: "ava") as! AVFile 
newsObj?["to"] = commentowner.last 
newsObj?["owner"] = commentowner.last 
newsObj?["puuid"] = commentuuid.last 
newsObj?["type"] = "comment" 
newsObj?["checked"] = "no" 
newsObj?.saveEventually () 


如 果 帖 子 与 评论 的 发 布 者 不 是 同一 个 人 ， 则 在 当前 用 户 发 布 评论 的 时 候 会 发 布 一 个 通知 ， 该 通知 先 记录 到 LeanCloud 云 端的 News 数 据 表 之 中 。 


步骤 3 ”在 CommentVC 类 的 tableView( :editActionsForRowAt:) 方 法 中 ， 在 STEP 2. 从 云端 删除 hashtag 代 码 段 的 下 面 继 续 添加 代码 : 


// STEP 3. 删除 评论 和 mention 的 消息 通知 

let newsQuery = AVQuery(className: "News") 

newsQuery?.whereKey("by", equalTo: cell.usernameBtn.titleLabel!.text) 
newsQuery?.whereKey("to", equalTo: commentowner.last!) 


newsQuery?.whereKey("type", containedIn: ["mention", "comment"]) 
newsQuery?.findObjectsInBackground(( (objects:[Any]?, error:Error?) in 
if error == nil { 


for object in objects! { 
(object as AnyObject).deleteEventually () 
} 


} 
}) 


当 用 户 在 删除 评论 的 时 候 ， 需 要 将 之 前 添加 到 News 中 相关 的 评论 和 @mention 记 录 也 随 之 删除 ，by 是 评论 或 @mention 的 发 布 者 ，to 是 评论 的 拥有 者 ， 这 里 要 删除 评论 和 @mention 两 种 类 型 。 


构建 并 运行 项 目 ， 在 其 他 用 户 的 帖子 中 添加 一 条 评论 ， 可 以 在 LeanCloud 云 端的 News 数 据 表 中 查看 到 相关 通知 记录 ， 如 图 35-7 所 示 。 
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图 35-7 添加 评论 后 在 News 数 据 表 中 查看 记录 
通过 News 数 据 表 的 记录 我 们 可 以 清楚 地 知道 ，liuming (当前 用 户 ) 对 Iele 的 帖子 (puuid 指 定 的 ) 发 送 了 一 个 评论 ， 该 评论 还 没有 被 lele 查 看 过 . 


如 果 再 向 该 帖子 发 布 一 个 带 @mention 的 评论 ， 则 可 以 在 News 数 据 表 中 看 到 2 条 相关 记录 ， 如 图 35-8 所 示 。 
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图 35-8 ”在 News 数 据 表 中 查看 到 新 添加 的 记录 
其 中 一 条 是 评论 通知 ， 另 一 条 则 是 @mention 通 知 。@mention 记 录 的 意思 是 : liuming (当前 用 户 ) 在 向 lele 的 帖子 (puuid 指 定 的 ) 发 送 的 评论 中 包含 一 个 给 菲菲 的 @mention。 
但 是 按照 逻辑 来 说 ， 如 果 在 News 数 据 表 中 添加 了 @mention 记 录 ， 就 不 需要 再 添加 评论 通知 记录 了 。 所 以 ， 我 们 接 下 来 再 做 一 些 修改 。 


步骤 4 在 sendBtn_clicked(_:) 方 法 中 ， 在 STEP 4. 当 遇 到 @mention 发 送 通 知 的 部 分 ， 添 加 一 个 变量 ， 用 来 记录 是 否 创 建 了 @mention 通 知 记录 。 


// STEP 4. Xi$Z|8mention A ž i 4m 
var mentionCreated - Bool() 

for var word in words { 

if word.hasPrefix("Q") { 


newsObj?.saveEventually () 
// 如 果 创 建 了 amention 记 录 ， 则 让 mentionCraeted 为 上 true 
mentionCreated = true 


) 


} 

// STEP 5. 发 送 评论 时 候 的 通知 

// 如 果 帖 子 的 发 布 者 与 当前 用 户 不 是 同一 人 ， 并 且 没 有 创建 Gmention 记 录 到 News 数 据 表 ， 则 执行 if 语 句 中 的 代码 
if commentowner.last != AVUser.current().username && mentionCreated == false 


构建 并 运行 项 目 ， 再 次 发 送 一 个 带 @mention 的 记录 ， 此 时 的 News 数 据 表 中 仅 包 含 一 条 mention 类 型 的 记录 。 如 果 在 评论 页 面 中 删除 该 条 评论 ， 则 mention 记 录 也 随 之 被 删除 。 


35.4 Like 的 通知 处 理 


接 下 来 ， 我 们 需要 处 理 喜 爱 按钮 的 通知 ， 在 PostVC 控 制 器 视图 中 有 两 个 地 方 需要 进行 代码 的 调整 。 


步骤 1 在 PostCell 类 的 likeBtn_clicked(_:) 方 法 中 ， 当 我 们 成 功 设置 了 喜爱 以 后 ， 添 加 下 面 的 代码 : 


if title == "unlike" { 
let object = AVObject(className: "Likes") 
object?["by"] = AVUser.current().username 
object?["to"] = puuidLbl.text 
object?.savelnBackground(( (success:Bool, error:Error?) in 


if success { 


// 如 果 设 置 为 喜爱 ， 则 发 送 通知 给 表格 视图 刷新 表格 


NotificationCenter.default.post(name: NSNotification.Name (rawValue: "liked"), object: nil) 
//| 单 击 喜爱 按钮 后 添加 消息 通知 
if self.usernameBtn.titleLabel?.text != AVUser.current().username { 
let newsObj = AVObject(className: "News") 
newsObj?["by"] = AVUser.current ().username 
newsObj?["ava"] = AVUser.current().object(forKey: "ava") as! AVFile 
newsObj? ["to"] self.usernameBtn.titleLabel?.text 
newsObj?["owner"] = self.usernameBtn.titleLabel?.text 
newsObj?["puuid"] = self.puuidLbl.text 
newsObj?["type"] = "like" 
newsObj?["checked"] = "no" 
newsObj?.saveEventually () 


当前 用 户 在 单 击 喜爱 按钮 以 后 ， 会 向 News 数 据 表 添 加 一 行 相关 数据 ， 注 意 这 里 所 设置 type 为 like， 并 且 只 有 在 帖子 发 布 者 和 当前 用 户 不 是 同一 人 的 情况 下 ， 才 提交 数据 到 News 表 中 。 


步骤 2 ”复制 上 面 新 添加 的 代码 到 likeTapped() 方 法 的 相同 位 置 ， 它 所 实现 的 功能 与 步骤 1 是 相同 的 。 


if success ( 

print ("标记 为 : like! ") 
self.likeBtn.setTitle("like", for: .normal) 
self.likeBtn.setBackgroundlImage (UIImage (named: "like.png"), for: .normal) 
// 如 果 设 置 为 喜爱 ， 则 发 送 通知 给 表格 视图 刷新 表格 
NotificationCenter.default.post(name: Notification.Name(rawValue: "liked"), object: nil) 
// 单 击 喜爱 按钮 后 添加 消息 通知 
if self.usernameBtn.titleLabel?.text != AVUser.current().username { 

let newsObj = AVObject(className: "News") 

newsObj?["by"] = AVUser.current ().username 

newsObj?["ava"] = AVUser.current().object(forKey: "ava") as! AVFile 

newsObj? ["to"] self.usernameBtn.titleLabel?.text 

newsObj?["owner"] = self.usernameBtn.titleLabel?.text 

newsObj?["puuid"] = self.puuidLbl.text 

newsObj?["type"] = "like" 

newsObj?["checked"] = "no" 

newsObj?.saveEventually () 


c 


步骤 3 在 likeBtn_clicked(_:) 方 法 中 ， 还 有 取消 喜爱 的 处 理 代码 ， 在 该 代码 段 的 最 后 ， 也 就 是 在 删除 喜爱 记录 ， 并 发 送 liked 通 知 的 后 面 ， 添 加 下 面 的 代码 : 


// 如 果 设 置 为 喜爱 ， 则 发 送 通 知 给 表格 视图 刷新 表格 

NotificationCenter.default.post(name: NSNotification.Name (rawValue: "liked"), object: nil) 
// 单 击 喜爱 按钮 后 删除 消息 通知 

let newsQuery = AVQuery(className: "News") 
newsQuery?.whereKey ("by", equalTo: AVUser.current ().username) 
newsQuery?.whereKey("to", equalTo: self.usernameBtn.titleLabel?.text) 
newsQuery?.whereKey("puuid", equalTo: self.puuidLbl.text) 


newsQuery?.whereKey("type", equalTo: "like") 
newsQuery?.findObjectsInBackground(( (objects:[Any]?, error:Error?) in 
if error == nil { 


for object in objects! { 
(object as AnyObject).deleteEventually () 


) 
} 
}) 


在 这 段 代码 中 ， 我 们 通过 查询 语句 找到 News 数 据 表 中 记录 当前 用 户 所 喜爱 的 那 条 帖子 记录 ， 并 将 之 删除 。 


构建 并 运行 项 目 ， 在 单 击 了 PostVC 控 制 器 视图 中 某 个 单元 格 里 面 的 喜爱 按钮 (不 是 当前 用 户 的 帖子 ) 以 后 ， 在 LeanCloud 云 端的 News 数 据 表 中 会 看 到 相应 的 记录 。 再 次 单 击 喜爱 按钮 删除 对 该 帖子 的 
喜爱 以 后 ， 对 应 的 在 News 数 据 表 中 会 删除 这 条 记录 。 


355 ”Follow 的 通知 处 理 


除了 在 PostVC 控 制 器 中 的 Like 按 钮 以 外 ， 我 们 还 需要 对 关注 操作 进行 通知 处 理 。 


步骤 1 在 HeaderView 类 中 的 followBtn_click(_:) 访 法 中 ， 在 添加 关注 的 闭 包 中 添加 下 面 的 代码 : 


AVUser.current().follow(user?.0bjectId, andCallback: { (success:Bool, error:Error?) in 
if success { 

self.button.setTitle("4/ C Xi£", for: .normal) 

self.button.backgroundColor = .green 


// 发 送 关注 通知 


let newsObj = AVObject(className: "News") 

newsObj?["by"] = AVUser.current ().username 

newsObj?["ava"] = AVUser.current().object(forKey: "ava") as! AVFile 
newsObj?["to"] = guestArray.last?.username 

newsObj?["owner"] = "" 

newsObj?["puuid"] = "" 

newsObj?["type"] = "follow" 

newsObj?["checked"] = "no" 

newsObj?.saveEventually () 


Jelse ( 
print (error?.localizedDescription) 
} 
)) 


因为 添加 的 通知 是 follow 类 型 ， 所 以 这 里 只 需要 填写 by、ava、to、type 和 checked 字 段 。 


步骤 2 在 followBtn_click( :) 方 法 中 ， 在 取消 关注 的 闭 包 中 添加 下 面 的 代码 : 


AVUser.current().unfollow(user?.0bjectId, andCallback: { (success:Bool, error:Error?) in 
if success { 
m button.setTitle("X j£", for: .normal) 
F.button.backgroundColor = .lightGray 
// 删除 关注 通知 
let newsQuery = AVQuery (className: "News") 
Deweguery whereKey Oy. equalTo: AVUser.current ().username) 
newsQuery?.whereKey ("to" ”equalTo: qguestArray.last?.username) 


newsQuery?.whereKey (" type" ;, equalTo: "follow") 
newsQuery?.findObjects]l InBackground ({ (objects:[Any]?, error:Error?) in 
if error == nil { 


for object in objects! { 
(object as AnyObject).deleteEventually () 
} 
} 
}) 
Jelse { 
print (error?.localizedDescription) 


} 


)) 


如 果 News 数 据 表 中 包含 follow 类 型 的 当前 用 户 关 注 指定 用 户 的 记录 ， 则 将 之 删除 。 


构建 并 运行 项 目 ， 从 聚合 页 面 选择 一 位 不 是 当前 用 户 本 人 的 用 户 后 单 击 关 注 ， 在 LeanCloud 云 端的 News 数 据 表 中 会 出 现 一 条 follow 类 型 的 记录 ， 取 消 关注 后 该 记录 被 删除 。 


35.6 ”设置 NewsCell 中 界面 控件 的 布局 


NewsCell 中 一 共有 4 个 UI 控件 ， 在 本 部 分 中 我 们 将 利用 自动 布局 的 约束 特性 对 它们 进行 布局 。 


步骤 1 在 NewsCell 类 的 awakeFromNib() 方 法 中 ， 添 加 下 面 的 代码 : 


override func awakeFromNib() { 
super.awakeFromNib() 


// 约束 
avalmg.translatesAutoresizingMaskIntoConstraints = false 
usernameBtn.translatesAutoresizingMaskIntoConstraints = false 
infoLbl.translatesAutoresizingMaskIntoConstraints = false 
dateLbl.translatesAutoresizingMaskIntoConstraints - false 
self.addConstraints (NSLayoutConstraint.constraints (withVisualFormat: "H:|-10-[ava 
(30)]-10-[username]-7-[info]-10-[date]", options: [], metrics: nil, views: ["ava": avalmg, "username": usernameBtn, "info": infolLbl, "date": dateLbl])) 


} 


在 该 方法 中 ， 首 先 将 4 个 UI 控件 的 translatesAutoresizingMasklntoConstraints 属 性 设置 为 false， 这 样 才能 在 后 面 使 用 自动 布局 的 约束 特性 。 


然后 创建 了 一 个 水 平 约束 ， 从 左 起 开始 10 个 点 是 30 宽 的 avalmg， 间 隔 10 个 点 是 usernameBtn， 再 间隔 7 个 点 是 infoLbl， 再 间隔 10 个 点 是 dateLbl。 


constraints(withVisualFormat:options:metrics:views:) 方 法 的 最 后 一 个 参数 是 为 Visua| 字 符 串 提供 一 个 对 照 表 。 


步骤 2 在 该 方法 中 继续 添加 下 面 的 4 个 约束 : 


self.addConstraints (NSLayoutConstraint.constraints (withVisualFormat: "V:|-10-[ava(30)]-10-|", options: [], metrics: nil, views: ["ava": avaImg])) 
self.addConstraints (NSLayoutConstraint.constraints (withVisualFormat: "V:|-10- [username (30) ]", options: [], metrics: nil, views: ["username": usernameBtn])) 
self.addConstraints (NSLayoutConstraint.constraints (withVisualFormat: "V:|-10-[info(30)]", options: [], metrics: nil, views: ["info": infolbl])) 
self.addConstraints (NSLayoutConstraint.constraints (withVisualFormat: "V:|-10-[date(30)]", options: [], metrics: nil, views: ["date": datelbl])) 


这 里 我 们 让 4 个 UI 控 件 在 垂直 方向 上 都 是 距离 顶部 10 个 点 ， 每 个 控件 的 高 度 都 是 30 个 点 。 注 意 ， 其 中 avalmg 还 有 一 个 距离 底部 10 个 点 的 约束 ， 因 为 有 了 这 个 自动 布局 就 确定 了 单元 格 的 高 度 ， 这 个 是 非 
常 有 必要 的 。 


步骤 3 “在 4 个 约束 的 后 面 添加 下 面 的 代码 让 头像 变 区 


hf KAKE 
self.avalmg.layer.cornerRadius = avalmg.frame.width / 2 


self.avalmg.clipsToBounds = true 


本 章 小 结 


本 章 我 们 实现 了 Instagram 的 搜索 功能 ， 首 先是 在 导航 栏 中 实现 了 搜索 栏 ， 通 过 U1-SearchBarDelegate 协 议 获取 用 户 所 要 搜索 的 数据 ， 然 后 再 通过 LeanCloud API 进 行 相关 查询 。 在 UsersVC 类 中 ， 我 
们 不 仅 实现 了 表格 视图 的 显示 ， 还 实现 了 集合 视图 的 数据 显示 。 


第 36 章 ”接收 数据 到 通知 控制 器 


本 章 我 们 将 会 通过 NewsVC 控 制 器 从 LeanCloud 云 端 接收 相关 的 数据 。 


36.1 ”从 News 数 据 表 中 接收 数据 


步骤 1 在 NewsVC 类 中 添加 下 面 几 个 属性 : 


import UIKit 
class NewsVC: UITableViewController { 
// 存储 云端 数据 到 数组 


var usernameArray = [String] () 
var avaArray = [AVFile] () 

Var typeArray = [String] () 
var dateArray = [Date] () 

var puuidArray = [String] () 
var ownerArray = [String] () 


这 里 一 共 创 建 了 6 个 属性 ， 其 中 typeArray 用 于 存储 通知 的 类 型 。 


步骤 2 ”在 viewDidLoad() 方 法 中 ， 添 加 下 面 的 代码 : 


override func viewDidLoad() { 
super.viewDidLoad() 
// 动态 调整 表格 的 高 度 
tableView.rowHeight = UITableViewAutomaticDimension 
tableView.estimatedRowHeight - 60 
// 导航 栏 的 title 


self.navigationItem.title = "通知 " 


因为 需要 动态 调整 单元 格 的 高 度 ， 所 以 设置 表格 视图 的 rowHeight 属 性 为 UITableView-AutomaticDimension， 并 且 设 置 预 估 的 行 高 为 60。 


步骤 3 ”在 设置 导航 栏 Title 的 下 面 ， 继 续 添加 代码 : 


// 从 云端 载 入 通知 数据 

let query = AVQuery(className: "News") 

query?.whereKey("to", equalTo: AVUser.current ().username) 

query?.limit = 30 

query?.findObjectsInBackground(( (objects:[Any]?, error:Error?) in 

if error == nil ( 
self.usernameArray.removeAll (keepingCapacity: 
self.avaArray.removeAll(keepingCapacity: false) 
self.typeArray.removeAll(keepingCapacity: false) 
self.dateArray.removeAll(keepingCapacity: false) 
self.puuidArray.removeAll(keepingCapacity: false) 
self.ownerArray.removeAll(keepingCapacity: false) 

for object in objects! { 
self.usernameArray.append((object as AnyObject).value(forKey: "by") as! String) 
self.avaArray.append((object as AnyObject).value(forKey: "ava") as! AVFile) 
self.typeArray.append((object as AnyObject).value(forKey: "type") as! String) 
self.dateArray.append((object as AnyObject).createdAt) 
self.puuidArray.append((object as AnyObject).value(forKey: "puuid") as! String) 
self.ownerArray.append((object as AnyObject).value(forKey: "owner") as! String) 


false) 


) Fh Fh 


h Fh 


|) Fh H 


h Fh Fh 


.tableView.reloadData () 


首先 从 News 数 据 表 中 取出 30 条 发 给 当前 用 户 的 通知 ， 然 后 将 通知 信息 人 存储 到 6 个 数组 之 中 ， 最 后 刷新 表格 视图 。 


步骤 4 ” 接 下 来 配置 表格 视图 的 单元 格 ， 修 改 tableView( :cellForRowAt:) 方 法 如 下 面 这 样 : 


override func tableView( tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { 
// 从 可 复 用 队列 中 获取 单元 格 对 象 
let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath) as! NewsCell 
cell.usernameBtn.setTitle(usernameArray[indexPath.row], for: .normal) 
avaArray[indexPath.row].getDataInBackground { (data:Data?, error:Error?) in 


if error == nil { 
cell.avalmg.image = UIImage (data: data!) 
Jelse ( 


print (error?.localizedDescription) 
} 
} 


return cell 


在 该 方法 中 先 从 表格 视图 的 可 复 用 队列 中 获取 到 单元 格 对 象 ， 然 后 设置 单元 格 的 username-Btn 以 及 avalmg。 


步骤 5 在 tableView( :cellForRowAt:) 方 法 return 语 句 的 上 面 继续 添加 代码 : 


override func tableView(  tableView: UlTableView, cellForRowAt indexPath: IndexPath) -> UlTableViewCell { 


// 消息 的 发 布 时 间 和 当前 时 间 的 间隔 差 

let from = dateArray [indexPath.row] 

let now = Date () 

let components : Set«Calendar.Component» = [.second, .minute, .hour, .day, .weekOfMonth] 
let difference - Calendar.current.dateComponents (components, from: from, to: now) 

if difference.second! <= 0 { 

cell.datelbl.text = "现在 " 


} 
if difference.second! > 0 && difference.minute! <= 0 { 
cell.dateLbl.text = "\(difference.second!) 4r." 


Eaa 


f difference.minute! > 0 && difference.hour! <= 0 { 
cell.dateLbl.text = "N(difference.minute!)7 i." 


f difference.hour! > 0 && difference.day! <= 0 ( 


cell.dateLbl.text = "\ (difference.hour!) 时 ." 


if difference.day! > 0 && difference.weekOfMonth! <= 0 { 
cell.dateLbl.text = "\(difference.day!) 天 ." 


if difference.weekOfMonth! > 0 ( 
cell.dateLbl.text = "N(difference.weekOfMonth!) Jj." 


} 


return cell 


e 


这 部 分 代码 我 们 可 以 直接 从 PostVC 类 的 tableView(_:cellForRowAt:) 方 法 中 复制 。 


步骤 6 在 return cell 语 句 的 上 面 继续 添加 下 面 的 代码 : 


// 定义 info 实 未 信息 

if typeArray[indexPath.row] == "mention" ( 
cell.infoLbl.text = "(mention f 44" 

} 

if typeArray[indexPath.row] == "comment" { 
cell.infolLbl.text = "评论 了 你 的 帖子 " 

} 

if typeArray[indexPath.row] == "follow" ( 
cell.infolbl.text = "关注 了 你 " 

} 

if typeArray[indexPath.row] == "like" { 
cell.infoLbl.text = "喜欢 你 的 帖子 " 


上 面 的 代码 会 根据 type 设 置 infoLb| 的 文本 内 容 。 


步骤 7 ”删除 numberOfsections(in:) 方 法 ， 并 修改 tableView( :numberOfRowslnsection:) 方 法 。 


override func tableView(  tableView: UITableView, numberOfRowsInSection section: Int) -> Int ( 
return usernameArray.count 


} 


构建 并 运行 项 目 ， 找 到 其 他 的 用 户 帖子 ， 然 后 单 击 喜 爱 、 发 送 评论 以 及 @mention 该 用 户 ， 最 后 关注 该 用 户 (可 以 先 取 消 关 注 ， 再 重新 关注 ) 。 在 LeanCloud 云 端的 News 数 据 表 中 可 以 看 到 四 个 不 同 
类 型 的 通知 记录 ， 如 图 36-1 所 示 。 


Bun [wm [mw | xe- 
type STRING m "owner STRING ‘vito STRING *|createdAt DATE 
|| follow lele 2016-08-16 06:35:30 


| mention lele 4E4A617A-F6.. lele 2016-88-16 06:35:11 
comment lele 4E4A617A-F6.. lele 2016-88-16 06:34:57 


like lele 4E4A617A-F6.. lele 2016-08-16 06:34:40 


图 36-1 不 同类 型 的 News 数 据 记 录 


使 用 关注 的 那个 人 的 账号 登录 ， 在 通知 页 面 中 可 以 看 到 相关 的 四 条 通知 信息 ， 如 图 36-2 所 示 。 


iuming 评论 了 你 的 帖子 15 分 


liuming (&mention f fiy 1577. 


iuming 关注 了 你 155. 


图 36-2 ”在 通知 控制 器 中 查看 相关 消息 


36.2 ”处 理 News 单 元 格 的 交互 操作 


接 下 来 ， 我 们 需要 处 理 用 户 在 单 击 News 单 元 格 或 者 是 usernameBtn 后 的 操作 。 


步骤 1 从 PostVC 类 中 复制 usernameBtn_clicked( ;) 方 法 到 NewsVC 类 中 ， 并 进行 相应 的 修改 。 


QIBAction func usernameBtn clicked( sender: AnyObject) { 


// 按钮 的 index 


let : — sender.layer.value(forKey: "index") as! IndexPath 

// 通过 i 获取 到 用 户 所 单 击 的 单元 格 

let cell = tableView.cellForRow(at: i) as! NewsCell 

// 如 果 当 前 用 户 单 击 的 是 自己 的 username， 则 调用 HomeVC， 否 则 是 GuestVC 

if cell.usernameBtn.titleLabel?.text == AVUser.current().username ( 

let home = self.storyboard?.instantiateViewController(withIdentifier: "HomeVC") as! HomeVC 

self.navigationController?.pushViewController (home, animated: true) 

Jelse ( 

let query = AVUser. query () 

query? .whereKey ("username", equalTo: cell.usernameBtn.titleLabel?.text) 

query?. findObjectsInBackground(( (objects:[Any]?, error:Error?) in 

if let object = objects?.last ( 
questArray. append (object as! AVUser) 
let guest = self.storyboard?.instantiateViewController (withldentifier: "GuestVC") as! GuestVC 
self.navigationController?.pushViewController (guest, animated: true) 


注意 ， 方 法 中 的 PostCell 应 修改 为 NewsCell。 


步骤 2 在 故事 板 中 将 usernameBtn 按 钮 与 NewsVC 中 的 usernameBtn_clicked( :) 方 法 创建 Action 关 联 ， 如 图 36-3 所 示 。 


步骤 3 ”在 tableView( :cellForRowAt:) 方 法 的 return 语 句 的 上 面 添加 一 行 代码 : 


// 赋值 ndexPath 给 usernameBtn 
cell.usernameBtn.layer.setValue(indexPath, forKey: "index") 


步骤 4 在 NewVC 类 中 添加 tableView( :didSelectRowAt:) 方 法 。 


// 单 击 单元 格 

override func tableView(  tableView: UITableView, didSelectRowAt indexPath: IndexPath) { 
let cell = tableView.cellForRow(at: indexPath) as! NewsCell 
// 跳 转 到 amention 评 论 
if cell.infoLbl.text == "评论 了 你 的 帖子 "” || cell.infoLbl.text == "@mention7 4g" ( 


commentuuid.append (puuidArray [indexPath.row]) 
commentowner.append (ownerArray [indexPath.row]) 
// 跳 转 到 评论 页 面 
let comments = self.storyboard?.instantiateViewController (withldentifier: "CommentVC") as! CommentVC 
self.navigationController?.pushViewController (comments, animated: true) 


v EJ NewsVC Scene 


v (3 NewsVC n n 
Y |] Table View eenameBtnn infoLbl 
v E Cell D, o - 
v LI Content View ^ 


[© Fiter || E Viówas: iPhone 6s («C ^R) — 100% + E3 尼 ini Hai 


BH € » @ Automatic) 2 NewsVC.swift } No Seléction <2> +X 


= @IBAction func usernameBtn_cãicked(_ sender: AnyObject) { 


/按钮 的 index 
let i = sender.layer.value(forKey: "index") as! IndexPath 


// 通过 i 获取 到 用 户 所 点 击 的 单元 格 | 
let cell = tableView.cellForRow(at: i) as! PostCell 


// 如 果 当 前 用 户 点 击 的 是 自己 的 username， 则 调用 HomeVC， 理 则 是 GuestVC 
if cell.usernameBtn.titleLabel?.text == AVUser.current().username 1 


let home = self.storyboard?.instantiateViewController(withIdentifier: "HomeVC") as! HomeVC 
self.navigationController?.pushViewController(home, animated: true) 
Jelse 1 


let query = AVUser.query() 
query?.whereKey("username", equalTo: cell.usernameBtn.titleLabel?.text) 
query?.findObjectsInBackground(( (objects:[AnyObject]?, error:Error?) in 
if let object = objects?.last 1 
guestArray.appenc(object as! AVUser) 


let guest - self.storyboard?.instantiateViewController(withIdentifier: "GuestVC") as! GuestVC 
self.navigationController?.pushViewController(guest, animated: true) 

} | 

3) 


| Connect Actio! 


图 36-3 ”为 usetnameBtn 5j usernameBtn, clicked(. :) Zr; && zz Action X X 
在 该 方法 中 ， 首 先 获取 到 用 户 所 单 击 的 单元 格 对 象 ， 然 后 根据 单元 格 的 infoLbl 信 息 进 行 页 面 跳 转 。 如 果 通 知 是 comment 或 mention 类 型 ， 则 跳 转 到 CommentVC 控 制 器 。 


步骤 5 在 tableView(_:didSelectRowAt:) 方 法 中 添加 对 另外 两 种 类 型 的 判断 跳 转 。 


// 跳 转 到 关注 人 的 页 面 
if cell.infoLbl.text == "关注 了 你 " { 
// 获取 关注 人 的 ARVUser 对 象 
let query = AVUser.query() 
query?.whereKey("username", equalTo: cell.usernameBtn.titleLabel?.text) 
query?.findObjectsInBackground(( (objects:[Any]?, error:Error?) in 
if let object = objects?.last ( 
guestArray.append(object as! AVUser) 
// 跳 转 到 访客 页 面 
let guest = self.storyboard?.instantiateViewController (withIdentifier: "GuestVC") as! GuestVC 
self.navigationController?.pushViewController (guest, animated: true) 
} 
}) 


} 

// 跳 转 到 帖子 页 面 
if cell.infolbl.text == "喜欢 你 的 帖子 " ( 

postuuid.append (puuidArray[indexPath.row]) 

let post = self.storyboard?.instantiateViewController(withIdentifier: "PostVC") as! PostVC 
self.navigationController?.pushViewController (post, animated: true) 


} 


构建 并 运行 项 目 ， 在 通知 页 面 中 单 击 关注 通知 会 跳 转 至 天 注 人 的 页 面 ， 单 击 喜 爱 通知 后 会 跳 转 到 被 标记 喜爱 的 那个 帖子 。 


36.3 ”设置 通知 页 面 的 图 标 


从 本 节 开 始 ， 我 们 将 要 设置 通知 页 面 的 三 种 不 同 通知 类 型 的 图 标 ， 当 有 新 的 通知 记录 时 ， 会 以 气泡 的 形式 显示 在 标签 栏 上 面 。 


hi 


又 1 从 资源 文件 夹 中 将 commentlcon.png、 


因为 通知 图 标 是 出 现在 标签 栏 控制 器 上 面 的 ， 所 以 需要 我 们 在 TabBarVC 类 中 添加 相关 的 代码 。 


步骤 2 在 TabBarVC.swift 文 件 中 添加 下 面 的 代码 : 


import UIKit 
// 关于 icons 的 全 局 变 


var icons - UIScrollView0) 
var corner = UllmageView() 


var dot = UIView() 


class TabBarVC: UITab 


BarController { 


这 里 一 共 设 置 了 3 个 全 局 变量 ， 滚 动 视图 类 型 的 icons， 用 于 显示 不 同类 型 的 icon 图 标 。UllmageView 类 型 的 corner， 用 于 显示 下 三 角 。 


步骤 3 在 viewDidLoad() 方 法 中 ， 


override func viewDi 


dLoad() { 


// 创建 Icon 条 


icons.frame = CGRect(x: self. 


添加 下 面 的 代码 : 


self.view.addSubview (icons) 


// 创建 corner 


corner.frame - CGRect (x: 


corner.center.x = icons.center.x 


corner.image = U 


corner.isHidden = 


mage (named: 


true 


self.view.addSubview (corner) 


dot.frame = CGRect (x: self.view.frame.width / 5 * 3, y: self 


"corner.png") 


.view.frame.height - 5, width: 7, height: 


dot.center.x sel 


F.view.frame.width / 5 * 3 + (self.view.frame.width / 5) / 2 


dot.backgroundColor = UIColor (red: 251/255, green: 103/255, blue: 29/255, alpha: 1.0) 


dot.layer.cornerRadius - dot. 


dot.isHidden = true 
self.view.addSubview (dot) 


// 显示 隐藏 的 控件 


corner.isHidden - 


false 


dot.isHidden = false 


在 viewDidLoad() 方 法 中 ， 


第 一 个 视图 是 icons， 


frame.width / 2 


共 要 创建 三 个 视图 。 


icons 用 于 呈现 所 有 类 型 的 还 未 被 当前 用 户 查 收 到 的 通知 数 。 它 的 x 的 值 为 控制 器 视图 宽度 的 五 分 之 三 ， 因 为 标签 


icons.frame.origin.x, y: icons.frame.origin.y + icons.frame.height, width: 20, height: 14) 


7) 


likelcon.png、followlcon.png 和 corner.png 四 个 文件 拖 电 到 项 目 之 中 。 为 这 四 个 文件 创建 一 个 新 组 : notification items, 


view.frame.width / 5 * 3 + 10, y: self.view.frame.height - self.tabBar.frame.height * 2 - 3, width: 50, height: 35) 


兰 中 一 共有 五 个 标签 ， 也 就 意味 着 它 的 x 位 置 是 在 标签 栏 第 四 个 


icons 的 起 始 位 置 ， 然 后 再 加 上 10 个 点 。icons 的 y 值 是 控制 器 视图 高 度 减 去 2 倍 标签 栏 的 高 度 再 减 去 3， 因 为 标签 栏 的 高 度 大 于 icons 的 高 度 ， 所 以 这 里 定位 icons 的 y 值 要 在 标签 栏 上 面 显 示 。 


第 二 个 视图 是 corner， 
顶端 紧 挨 着 icons 的 底 言 


第 三 个 视图 是 dot， 当 有 通知 消息 的 时 候 ， 


这 个 视图 实际 上 是 呈现 在 icons 下 面 的 小 三 角 ， 并 指向 到 标签 栏 的 通知 icon。 


会 呈现 在 标签 栏 通知 icon 的 底部 ， 代 表 有 消息 通 


它 在 初始 化 的 时 候 是 被 隐藏 的 ， 我 们 主要 看 它 的 y 值 是 icons 的 y 值 加 上 icons 的 高 度 ， 也 就 意味 着 它 的 


最 后 让 corner 和 dot 隐 藏 ， 之 所 以 没有 隐藏 icons 视 图 ， 是 因为 初始 化 后 的 icons 只 是 一 个 视图 ， 其 内 部 没有 任何 的 可 视 化 元 素 ， 昌 然 呈现 到 视图 上 ， 但 是 用 户 不 会 看 到 任何 东西 。 


步骤 4 在 TabBarVC 类 中 创建 query(type:image:) 方 法 。 


func query(type:[String], image: UlImage) { 


let query = AVQuery (className: "News") 


query?.whereKey (" 


query?.whereKey ("checked", 


query?.whereKey (" 


ee 
if error == 
if count 


// 之 后 Dh 关 代码 


} 


}else { 


to", equalTo: AVUser.current ().username) 


qualTo: "no") 


type", containedIn: type) 


in 


tsInBackground(( (count:Int, error:Error?) 


print (error?.localizedDescription) 


} 
}) 
} 


该 方法 主要 负责 查询 相关 类 型 的 ， 


没有 被 checked 的 通知 数量 ， 然 


步骤 5 在 TabBarVC 类 中 创建 placelcon(image:text:) 方 法 。 


func PlaceIcon (image: UIImage, 


// 创建 某 个 独立 的 通知 提示 


let view = UIImageView ( 


view.image = image 
icons.addSubview (view) 


text: String) ( 


// 创建 Label 

let label = UILabel ( 

label.font = UIFont (name: "HelveticaNeue-Medium", size: 18) 
label .text = text 

label.textAlignment = .center 

label.textColor = .white 

view.addSubview (label) 


// 调整 cons 视 图 的 frame 


后 再 运行 相关 的 代码 。 


frame: CGRect(x: icons.contentSize.width, y: 0, width: 50, height: 35)) 


frame: CGRect(x: view.frame.width / 2, y: 0, width: view.frame.width / 2, height: 


icons.frame.size.width = icons.frame.width + view.frame.width - 4 


icons.contentSize. 


icons.center.x 
// 显示 隐藏 的 控件 


corner.isHidden - 


self.view.frame.width / 5 * 4 - (self.view. 


width = icons.contentSize.width + view.frame.width - 4 


frame.width / 5) / 4 


false 


dot.isHidden - false 


当 我 们 需要 在 icons 视 图 中 显示 各 种 类 型 的 通知 数量 时 会 调用 该 方法 。 


view.frame.height)) 


在 该 方法 中 ， 首 先 创建 了 一 个 Image View 对 象 view， 该 view 用 于 显示 特定 的 通知 提示 ， 它 的 父 视图 是 icons。view 的 x 值 是 父 视图 (icons) 的 contentSize.width 的 位 置 ， 因 为 在 icons 中 可 能 会 显示 1 
至 3 种 不 同类 型 的 通知 提示 ， 每 次 在 向 icons 添 加 提示 (view 对 象 ) 的 时 候 ， 


然后 ， 我 们 又 创建 了 一 个 Label 对 象 ， 用 于 显示 当前 类 型 通知 的 提示 数量 


如 图 36-4 所 示 。 


都 需要 定位 它 的 x 值 为 之 前 的 contentSize 宽 度 。 


。 它 的 x 的 值 是 view 宽 度 的 二 分 之 一 的 位 置 ， 


宽度 也 是 view 宽 度 的 二 分 之 一 


o 


最 后 将 Label 对 象 作为 子 视图 ， 添 加 到 view 之 中 ， 


— View 宽度 


E36-4 ”提供 的 icon 图 标的 宽度 


最 后 我 们 还 调整 了 icons 的 几 个 属性 ， 宽 度 为 icons 自 身 宽度 加 上 view 宽 度 减 4， 之 所 以 减 去 4 是 因为 提示 lcon 的 png 图 都 是 圆 角 的 ， 如 果 两 个 图 紧 挨 在 一 起 的 话 ， 衔 接 处 的 上 下 边 会 有 缺 角 。icons 的 
contentSize 与 宽度 一 样 ， 最 后 设置 了 icons 的 水 平 中 心 位 置 。 


例如 : 当 我 们 第 一 次 添加 view 的 时 候 ，view 的 x 值 为 0， 因 为 icons 此 时 的 contentsize 宽 度 为 0， 添 加 以 后 的 icons 宽 度 是 120。 而 第 二 次 添加 view 的 时 候 ，view 的 x 值 为 116， 以 此 类 推 。 


步骤 6 在 query(type:image;) 方 法 中 的 if count» 0 的 判断 语句 中 ， 添 加 下 面 的 代码 : 


if count > 0 ( 
self.placelcon(image: image, text: "N(count)") 


} 


如 果 查 询 到 的 通知 数量 大 于 0， 则 调用 placelcon( :text:) 方 法 。 


在 viewDidLoad() 方 法 的 最 后 ， 添 加 下 面 的 代码 : 


// 显示 所 有 通知 icon 


query (type: ["like"], image: UIImage (named: "likeIcon.png")!) 
query (type: ["follow"], image: UIImage (named: "followIcon.png")!) 
query (type: ["mention", "comment"], image: UIImage (named: "commentlIcon.png")!) 


在 上 面 的 这 段 代 码 中 ， 我 们 依次 在 icons 视 图 中 显示 like、follow 和 mention/comment 的 通知 icons 和 数量 。 


构建 并 运行 项 目 ， 确 保 在 News 数 据 表 中 有 针对 当前 用 户 的 通知 消息 ， 效 果 如 图 36-5 所 示 。 


图 36-5 消息 通知 最 终 的 显示 效果 


通过 提示 我 们 可 以 知道 ， 当 前 用 户 有 一 个 帖子 被 标记 了 喜爱 ， 有 一 位 用 户 关注 了 自己 ， 有 两 个 新 的 评论 或 @mention。 并 且 在 通知 标签 的 底部 还 有 一 个 圆 点 ， 这 代表 着 有 新 通知 。 


接 下 来 ， 当 用 户 单 击 通知 标签 以 后 ， 还 要 让 icons 视 图 消失 ， 毕 竟 它 不 能 永远 停留 在 屏幕 上 。 


步骤 8 在 NewsVC 类 的 viewDidLoad() 方 法 中 的 findObjectsiInBackground( :) 方 法 的 闭 包 中 ， 添 加 下 面 的 代码 : 


query? .findObjectsInBackground({ (objects: 
[Any]?, error:Error?) in 


if error == nil { 
for object in objects as! [AnyObject] { 
self.usernameArray.append(object.value(forKey: "by") as! String) 
self.avaArray.append(object.value(forKey: "ava") as! AVFile) 
self.typeArray.append(object.value(forKey: "type") as! String) 
self.dateArray.append (object.createdAt) 


self.puuidArray.append(object.value(forKey: "puuid") as! String) 
self.ownerArray.append(object.value(forKey: "owner") as! String) 
object.setObject("yes", forKey: "checked") 
object.saveEventually () 


ty 


UIView.animate (withDuration: 1, animations: { 
icons.alpha = 0 
corner.alpha = 0 
dot.alpha = 0 

)) 


self.tableView.reloadData|() 


当 用 户 切 换 到 NewsVC 控 制 器 以 后 ， 我 们 将 从 云端 获取 到 的 每 条 News 记 录 的 checked 字 段 设置 为 yes， 最 后 通过 动画 的 形式 ， 让 icons、corner 和 dot 在 1 秒 钟 内 消失 。 


在 LeanCloud 云 端 先 将 之 前 的 News 记 录 的 checked 字 段 设 置 为 no， 然 后 构建 并 运行 项 目 ， 当 单 击 通知 标签 以 后 ， 通 知 提示 条 渐渐 消失 。 


本 章 小 结 


本 章 我 们 实现 了 Instagram 的 消息 通知 提示 栏 的 功能 ， 结 合 所 提供 的 各 种 icon 图 标 ， 根 据 News 数 据 表 中 的 信息 ， 显 示 相 应 的 提示 信息 。 


第 37 章 ”对 用 户 界 面 的 再 改进 


在 本 章 ， 我 们 将 会 重新 设置 Instagram 应 用 的 个 别 图 标 ， 使 其 更 接近 真正 的 产品 。 


371 设置 上 传 标签 


在 当前 的 标签 栏 中 ， 全 部 的 五 个 标签 均 为 图 片 加 文字 的 形式 ， 为 了 突出 重点 ， 我 们 需要 将 上 传 标签 的 文字 去 除 ， 只 用 图 片 的 形式 展现 标签 。 


步骤 1 在 故事 板 中 选中 上 传 lcon 标 签 ， 在 Attributes Inspector 中 将 Image 设 置 为 空 ， 如 图 37-1 所 示 。 


图 37-1 删除 上 传 标签 的 Icon 


步骤 2 在 项 目 导 航 中 删除 tabbar items 组 中 的 upload.png、upload@2x.png 和 upload@3x.png 三 个 图 片 文件 ， 在 弹出 的 对 话 框 中 选择 Move to Trash 按 钮 ， 这 样 三 个 文件 会 真正 的 从 项 目 文件 夹 中 
删除 ， 如 图 37-2 所 示 。 


步骤 3 ”从 资源 文件 夹 中 选择 最 新 的 upload.png 文 件 拖 蝶 到 tabbar items 组 中 。 


步骤 4 ”在 TabBarVC 类 的 viewDidLoad0 方 法 中 ， 添 加 下 面 的 代码 : 


override func viewDidLoad() { 


self.tabBar.isTranslucent = false 
// 自 定义 标签 按钮 
let itemWidth = self.view.frame.width / 5 


let itemHeight = self.tabBar.frame.height 

let button = UIButton(frame: CGRect(x: itemWidth * 2, y: self.view.frame.height - itemHeight, width: itemWidth - 10, height: itemHeight)) 
button.setBackgroundImage (UIImage (named:"upload.png"), for: .normal) 

button.adjustsImageWhenHighlighted = false 

button.addTarget(self, action: #selector (uploaded), for: .touchUpInside) 


self.view.addSubview (button) 


在 该 方法 中 创建 了 一 个 button 按 钮 ， 该 按钮 的 宽度 为 控制 器 视图 的 五 分 之 一 再 减 去 10， 高 度 为 标签 栏 的 高 度 ，x 的 值 为 第 三 个 标签 按钮 的 位 置 ，y 值 就 是 视图 高 度 减 去 标签 栏 的 高 度 。 然 后 将 
upload.png 作 为 按钮 的 背景 图 ， 并 目 设置 了 adjustsImageWhenHighlighted 属 性 为 false， 该 属性 用 来 确定 按钮 在 高 亮 状态 下 是 否 调 整 图片 ， 如 果 为 真 则 按钮 在 高 亮 状态 下 ， 其 图 片 也 是 高 亮 状态 ， 默 认 什 
为 真 。 之 后 ， 设 置 该 按钮 在 单 击 后 会 执行 uploaded( 方 法 ， 最 后 将 按钮 添加 到 控制 器 的 视图 之 中 。 


步骤 5 在 TabBarVC 类 中 添加 uploaded0 方 法 。 


func uploaded (sender: UIButton) { 
self.selectedIndex = 2 


} 


当 用 户 单 击 upload 按 钮 以 后 会 让 标签 栏 控制 器 切换 到 索引 值 为 2 的 控制 器 ， 也 就 是 第 三 个 控制 器 。 


构建 并 运行 项 目 ， 效 果 如 图 37-3 所 示 。 


a Do you want to move the 3 selected items to the Trash, or only 
remove the references to them? 


Cancel Remove References | Move to Trash 
€ Od 


图 37-2 ”删除 upload 标 签 按 钮 


图 37-3 ”全 新 的 upload 标 签 按钮 


37.2 ”设置 按钮 为 圆 角 


在 Instagram 项 目 中 有 很 多 按钮 的 外 观 现在 还 都 是 直角 ， 不 是 很 美观 。 本 部 分 我 们 将 修改 它 为 圆 角 。 


步骤 1 在 FollowersCell 类 中 的 awakeFromNib() 方 法 中 添加 下 面 的 代码 : 


override func awakeFromNib() { 
ollowBtn.frame = CGRect(x: width - width / 3.5 - 20, y: 30, width: width / 3.5, height: 30) 
// 设置 关注 按钮 为 圆 角 
ollowBtn.layer.cornerRadius = followBtn.frame.width / 20 


构建 并 运行 项 目 ， 在 关注 页 面 中 的 效果 如 图 37-4 所 示 。 


步骤 2 ”在 SignlnVC 类 的 viewDidLoad() 方 法 中 添加 下 面 的 代码 : 


override func viewDidLoad() { 
signUpBtn.frame = CGRect(x: self.view.frame.width - signlInBtn.frame.width - 20, y: signInBtn.frame.origin.y, width: signlInBtn.frame.width, height: 30) 
signlInBtn.layer.cornerRadius = signInBtn.frame.width / 20 
signUpBtn.layer.cornerRadius = signUpBtn.frame.width / 20 


az E g 


构建 并 运行 项 目 ， 在 登录 页 面 中 的 效果 如 图 37-5 所 示 。 


3" mengmeng 


| Xiaomei 


| shanshan 


图 37-4 ”关注 按钮 变 为 了 圆 角 


图 37-5 ”登录 和 注册 按钮 变 为 了 圆 A 


仿照 步骤 2， 在 SignUPVC 类 的 viewDidLoad() 方 法 中 添加 下 面 的 两 行 代 码 : 


signUpBtn.layer.cornerRadius 
cancelBtn.layer.cornerRadius 


signUpBtn.frame.width / 20 
cancelBtn.frame.width / 20 


步骤 4 仿照 步骤 2， 在 ResetPasswordVC 类 的 viewDidLoad() 方 法 中 添加 下 面 的 两 行 代 码 : 


包 。 


resetBtn.layer.cornerRadius = resetBtn.frame.width / 20 
cancelBtn.layer.cornerRadius = cancelBtn.frame.width / 20 


在 前 一 章 中 ， 我 们 设置 了 当 用 户 单 击 通知 标签 以 后 会 让 icons 视 图 消失 。 在 这 部 分 中 ， 我 们 将 设置 更 改 为 用 户 在 看 到 消息 提示 8 秒 钟 以 后 让 icons 视 图 消失 ， 这 样 更 加 符合 用 户 的 视觉 体验 。 


步骤 1 在 NewsVC 类 的 viewDidLoad() 方 法 中 草 切 UlView.animate() 方 法 。 
步骤 2 ”粘贴 UIView.animate() 方 法 到 TabBarVC 的 viewDidLoad() 方 法 的 最 后 。 


将 粘贴 的 代码 修改 为 下 面 这 样 : 


UIView.animate (withDuration: 1, delay: 8, options: [], animations: {() -> Void in 


icons.alpha - 0 
corner.alpha = 0 
dot.alpha = 0 

), completion: nil) 


这 里 使 用 了 animate(withDuration:delay:options:animations:completion:) 方 法 ， 它 的 第 一 个 参数 代表 动画 时 间 ， 第 二 个 参数 代表 延 时 多 少 秒 以 后 进行 动画 ，animations 参 数 则 是 要 执行 的 动画 闭 


构建 并 运行 项 目 ， 可 以 看 到 提示 条 在 8 秒 钟 以 后 消失 。 


在 标签 栏 中 ， 我 们 希望 标签 只 是 显示 icon 图 片 而 不 显示 文字 信息 ， 因 为 图 片 足以 向 用 户 说 明 该 视图 控制 器 的 用 途 。 


步骤 1 在 故事 板 中 选中 某 个 标签 ltem， 在 Attributes Inspector 中 将 将 Title 中 的 文字 删除 ， 效 果 如 图 37-6 所 示 。 


步骤 2 ”确定 还 是 选中 标签 ltem 的 情况 下 ， 在 Size Inspector 中 将 Top 设 置 为 6， 将 Bottom 设 置 为 -6， 此 时 Icon 图 片 向 下 平移 了 6 个 点 ， 如 图 37-7 所 示 。 


图 37-6 ”删除 标签 Ttem 的 Title 


图 37-7 设置 标签 Item 的 Top 和 Bottom 


步骤 3 ”以 此 类 推 ， 修 改 其 他 三 个 标签 的 Item 属 性 。 


本 章 小 结 


本 章 我 们 对 Instagram 项 目的 用 户 界面 进行 了 细节 方面 的 修改 ， 使 得 它 更 像 是 一 个 成 熟 的 产品 。 


